:root{
  --bg:#07182e;
  --bg-deep:#04111f;
  --panel:#0b223d;
  --panel-2:#102c4e;
  --line:#24496e;
  --line-soft:rgba(126,174,222,.24);
  --text:#f7fbff;
  --muted:#9fb4cb;
  --blue:#1688ff;
  --blue-2:#38b7ff;
  --orange:#f5a31a;
  --green:#20c875;
  --shadow:0 18px 55px rgba(0,0,0,.34);
  --radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{
  margin:0;
  min-height:100vh;
  position:relative;
  isolation:isolate;
  background:#07131c;
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.32)),
    url("assets/images/fundo-laguna-escura-v20.webp");
  background-size: auto, cover;
  background-position: center, center var(--marble-scroll,0px);
  background-repeat: repeat, no-repeat;
}
body.dialog-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%}
svg{display:block}
.shell{width:min(1480px,calc(100% - 36px));margin:0 auto}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(4,9,17,.91);
  border-bottom:1px solid rgba(126,174,222,.15);
  backdrop-filter:blur(16px);
}
.header-inner{
  height:70px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.brand-logo{width:66px;height:50px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28))}
.brand-text{display:flex;flex-direction:column;line-height:.95}
.brand-text strong{
  font-family:"Baloo 2",sans-serif;
  font-size:31px;
  font-weight:800;
  letter-spacing:.2px;
}
.brand-text strong em{font-style:normal;color:var(--orange)}
.brand-text small{
  margin-top:3px;
  color:#b7c9dc;
  font-size:8px;
  font-weight:800;
  letter-spacing:4px;
}
.main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.main-nav a{
  padding:10px 16px;
  border-radius:10px;
  color:#dce9f7;
  font-size:14px;
  font-weight:700;
  transition:.18s ease;
}
.main-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.main-nav a.active{
  color:#fff;
  background:linear-gradient(180deg,#178eff,#0877e9);
  box-shadow:0 7px 18px rgba(17,127,239,.26);
}
.music-button{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:0 14px;
  border:1px solid rgba(145,188,230,.34);
  border-radius:999px;
  background:rgba(4,16,31,.64);
  color:#f7fbff;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  transition:.18s ease;
}
.music-button:hover{border-color:#55baff;background:rgba(15,51,86,.72)}
.music-note{
  display:grid;
  place-items:center;
  width:26px;height:26px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  color:#dff4ff;
  font-size:16px;
}
.music-dot{
  width:7px;height:7px;border-radius:50%;
  background:#61788f;
  box-shadow:0 0 0 0 rgba(47,204,124,0);
  transition:.2s ease;
}
.music-button[aria-pressed="true"] .music-dot{
  background:#2fd07c;
  box-shadow:0 0 10px rgba(47,208,124,.8);
}
.menu-toggle{display:none;background:none;border:0;padding:9px;cursor:pointer}
.menu-toggle span{display:block;width:24px;height:2px;margin:5px 0;background:#fff;border-radius:9px}

/* Top stage */
.top-stage{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:28px 0 0;
  border-bottom:1px solid rgba(126,174,222,.14);
}
.top-stage::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,8,15,.20) 0%,rgba(4,8,15,.48) 100%);
}
.hero-copy{text-align:center;padding:0 20px 18px}
.hero-copy h1{
  margin:0;
  font-family:"Baloo 2",sans-serif;
  font-size:clamp(36px,4vw,57px);
  line-height:1;
  letter-spacing:-.8px;
  text-shadow:0 4px 22px rgba(0,0,0,.45);
}
.hero-copy h1 span{color:#fff}
.hero-subtitle{
  margin:6px auto 0;
  max-width:980px;
  color:#e6eff8;
  font-size:15px;
  line-height:1.55;
  font-weight:600;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}


.featured-heading{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  max-width:1320px;
  margin:10px auto 12px;
}
.featured-heading h2{
  margin:0;
  font-family:"Baloo 2",sans-serif;
  font-size:22px;
  line-height:1;
  color:#f5f9ff;
}
.featured-heading-line{height:1px;background:linear-gradient(90deg,transparent,rgba(108,190,255,.45))}
.featured-heading-line:last-child{background:linear-gradient(90deg,rgba(108,190,255,.45),transparent)}
.showcase-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
  max-width:1320px;
  margin:0 auto;
}
.showcase-card{
  position:relative;
  min-width:0;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(115,184,247,.66);
  border-radius:12px;
  background:#0b2039;
  color:#fff;
  box-shadow:0 11px 30px rgba(0,0,0,.34);
  cursor:pointer;
  text-align:left;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.showcase-card:hover{
  transform:translateY(-4px);
  border-color:#77ccff;
  box-shadow:0 15px 38px rgba(0,0,0,.42),0 0 0 1px rgba(55,174,255,.18);
}
.showcase-card:focus-visible{outline:3px solid #6bd1ff;outline-offset:3px}
.showcase-media{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#0a1b31;
}
.showcase-media::after{
  content:"";
  position:absolute;inset:auto 0 0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(3,14,27,.52));
  pointer-events:none;
}
.showcase-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.showcase-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:60px;
  padding:10px 15px;
  background:linear-gradient(180deg,#3049c3,#2439a9);
}
.showcase-card--live .showcase-footer{background:linear-gradient(180deg,#2c59d8,#2443b1)}
.showcase-footer strong{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:18px;
  font-weight:800;
}
.showcase-footer>span:first-child{min-width:0;display:block}
.showcase-footer small{display:block;margin-bottom:2px;color:#a8d8ff;font-size:8px;font-weight:800;letter-spacing:1.2px}
.showcase-arrow{
  flex:0 0 auto;
  width:22px;height:22px;
  display:grid;place-items:center;
  border-radius:50%;
  color:#fff;
  font-size:18px;
  line-height:1;
}

.benefit-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  max-width:990px;
  margin:12px auto 10px;
  padding:0;
}
.benefit-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:46px;
  color:#9dcfff;
  position:relative;
}
.benefit-item:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  height:28px;
  width:1px;
  background:rgba(158,195,231,.35);
}
.benefit-item svg{
  width:31px;height:31px;
  stroke:currentColor;
  stroke-width:1.7;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.benefit-item span{display:flex;flex-direction:column;gap:1px}
.benefit-item strong{font-size:14px;color:#f5f9ff}
.benefit-item small{font-size:11px;color:#8fa8c0}

/* Catalog */
.catalog-section{padding:22px 0 32px;background:rgba(2,7,14,.45)}
.catalog-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding-bottom:12px;
  border-bottom:1px solid #1f75b8;
}
.catalog-title{display:flex;align-items:center;gap:11px}
.catalog-icon{font-size:26px}
.eyebrow{
  display:block;
  color:#79c9ff;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.8px;
  margin-bottom:1px;
}
.catalog-title h2{
  margin:0;
  font-family:"Baloo 2",sans-serif;
  font-size:28px;
  line-height:1;
}
.filters{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}
.filter-cluster{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
.filter-cluster--themes{
  width:100%;
  padding-top:8px;
  margin-top:2px;
  border-top:1px solid rgba(66,100,128,.38);
}
.filter-cluster--themes .filter-label{min-width:max-content}

.filter-label{
  margin-right:1px;
  color:#7892ad;
  font-size:9px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.filter-separator{
  width:1px;
  height:26px;
  margin:0 2px;
  background:linear-gradient(180deg,transparent,#426480 22%,#426480 78%,transparent);
  opacity:.9;
}
.filter{
  min-height:31px;
  padding:0 13px;
  border:1px solid #274766;
  border-radius:999px;
  background:rgba(7,26,48,.82);
  color:#d7e5f3;
  cursor:pointer;
  font-size:11px;
  font-weight:700;
  transition:.16s ease;
}
.filter:hover{border-color:#4daef5;color:#fff}
.filter.active{
  border-color:#1590ff;
  background:linear-gradient(180deg,#168fff,#0678e7);
  color:#fff;
  box-shadow:0 5px 14px rgba(13,126,235,.18);
}
.filter--reset.active{
  border-color:#1590ff;
  background:linear-gradient(180deg,#168fff,#0678e7);
}
.filter--available.active{
  border-color:#37ce88;
  background:linear-gradient(180deg,#20b96f,#159156);
  box-shadow:0 5px 14px rgba(32,185,111,.17);
}
.filter--development.active{
  border-color:#f0aa42;
  background:linear-gradient(180deg,#e79424,#bf6b13);
  box-shadow:0 5px 14px rgba(231,148,36,.17);
}
.platform-group{margin-top:12px}
.platform-group[hidden]{display:none}
.platform-heading{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:27px;
  margin-bottom:7px;
  color:#d9e9f7;
}
.platform-heading>span{
  color:#84caff;
  font-size:19px;
  line-height:1;
}
.platform-heading h3{
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.2px;
}
.platform-heading small{
  margin-left:auto;
  color:#758fa9;
  font-size:11px;
}
.game-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.game-card{
  appearance:none;
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
  padding:0;
  overflow:hidden;
  border:1px solid #294967;
  border-radius:9px;
  background:linear-gradient(180deg,#0b223d,#091b31);
  color:#fff;
  box-shadow:0 7px 18px rgba(0,0,0,.18);
  cursor:pointer;
  text-align:left;
  transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease;
}
.game-card:hover{
  transform:translateY(-3px);
  border-color:#4a9ad8;
  box-shadow:0 10px 25px rgba(0,0,0,.28);
}
.game-card:focus-visible{outline:3px solid #69cbff;outline-offset:2px}
.game-card[hidden]{display:none!important}
.game-card-media{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#07182e;
}
.game-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .24s ease}
.game-card:hover .game-card-media img{transform:scale(1.035)}
.game-card[data-game="igo"] .game-card-media img{
  object-fit:cover;
  object-position:center 10%;
  background:#eee;
}
.card-status{
  position:absolute;
  top:7px;right:7px;
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(3,17,30,.78);
  color:#c7d8e8;
  backdrop-filter:blur(6px);
  font-size:9px;
  font-style:normal;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.card-status--live{background:rgba(18,169,92,.88);color:#fff;border-color:rgba(132,255,190,.38)}
.game-card-body{
  display:block;
  padding:11px 12px 12px;
}
.game-card-title{
  display:block;
  min-height:21px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px;
  font-weight:800;
}
.game-card-meta{
  margin-top:5px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#819ab2;
  font-size:11px;
}
.game-card-meta>span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.game-card-meta em{
  flex:0 0 auto;
  padding:2px 5px;
  border-radius:999px;
  background:#0d73d7;
  color:#fff;
  font-style:normal;
  font-weight:700;
}

.creator-section{
  padding:10px 0 14px;
  background:rgba(2,7,14,.52);
}
.creator-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:12px 18px;
  border:1px solid #345779;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(11,34,61,.96),rgba(7,25,46,.98));
  box-shadow:0 14px 35px rgba(0,0,0,.22);
}
.creator-logo{width:118px;height:72px;object-fit:contain}
.creator-copy{text-align:center}
.creator-copy .eyebrow{font-size:15px;letter-spacing:2.3px;margin-bottom:5px;color:#83d2ff}
.creator-copy h2{
  max-width:760px;
  margin:0 auto;
  font-family:"Inter",sans-serif;
  font-size:15px;
  line-height:1.45;
}
.creator-copy p{margin:4px 0 0;color:#d6e4f2;font-size:13px;font-weight:700}
.creator-copy .creator-message{margin-top:2px;color:#9eb6cd;font-size:11px;font-weight:600}
.creator-copy .creator-message--idea{margin-top:5px;color:#d5ecff;line-height:1.45}
.socials{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:680px}
.socials a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 16px;
  border:1px solid #2f9cff;
  border-radius:9px;
  background:linear-gradient(180deg,#0f7fe8,#0969c5);
  color:#fff;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  transition:.17s ease;
}
.socials a:hover{transform:translateY(-2px);filter:brightness(1.08)}
.social-icon{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 auto;
}
.social-icon--instagram{border:0;border-radius:6px;background:transparent}
.social-icon--instagram svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:1.9}
.social-icon--instagram .instagram-dot{fill:#fff;stroke:none}
.social-icon--in{
  border:0;
  border-radius:3px;
  background:#fff;
  color:#0a66c2;
  font-size:12px;
}
.social-icon--linkedin{
  border:0;
  border-radius:3px;
  background:#fff;
  color:#0a66c2;
  font-size:12px;
  font-weight:900;
}
.social-icon--youtube svg{
  width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round;
}
.social-icon--youtube svg path{fill:#fff;stroke:none}
.social-icon--facebook{
  border-radius:50%;background:#fff;color:#0969c5;font-size:20px;font-weight:900;font-family:Arial,sans-serif;
}
.social-icon--x{font-size:19px;font-weight:900;color:#fff}


.site-footer{
  padding:10px 0 14px;
  border-top:1px solid rgba(126,174,222,.12);
  background:rgba(3,8,15,.83);
  color:#7690aa;
}
.footer-inner{
  display:flex;
  justify-content:center;
  gap:28px;
  text-align:center;
  font-size:9px;
}

/* Dialog */
.game-dialog{
  width:min(700px,calc(100% - 30px));
  padding:0;
  overflow:hidden;
  border:1px solid #3e7099;
  border-radius:18px;
  background:#0a2039;
  color:#fff;
  box-shadow:0 28px 85px rgba(0,0,0,.58);
}
.game-dialog::backdrop{background:rgba(1,8,16,.76);backdrop-filter:blur(5px)}
.dialog-close{
  position:absolute;z-index:3;top:10px;right:10px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  background:rgba(4,17,31,.82);
  color:#fff;
  cursor:pointer;
  font-size:22px;
}
.dialog-media{aspect-ratio:16/9;background:#061323}
.dialog-media img{width:100%;height:100%;object-fit:cover}
.dialog-content{padding:22px 24px 26px}
.dialog-chip{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  background:#0e78db;
  color:#fff;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.dialog-content h2{margin:10px 0 3px;font-family:"Baloo 2",sans-serif;font-size:31px}
.dialog-genre{margin:0 0 14px;color:#79c9ff;font-size:12px;font-weight:700}
.dialog-content>p:last-of-type{color:#b4c6d8;line-height:1.65;font-size:15px}
.dialog-status{
  display:inline-flex;
  margin-top:9px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:8px;
  color:#94abc1;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
}

.toast{
  position:fixed;
  left:50%;bottom:22px;z-index:1500;
  transform:translate(-50%,18px);
  opacity:0;
  pointer-events:none;
  padding:10px 14px;
  border:1px solid #315577;
  border-radius:10px;
  background:#0b2038;
  color:#fff;
  box-shadow:var(--shadow);
  font-size:12px;
  transition:.2s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0)}


@media (max-width:1180px){
  .header-inner{grid-template-columns:auto 1fr auto;gap:18px}
  .brand-text strong{font-size:27px}
  .showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .showcase-media{aspect-ratio:16/9}
  .benefit-strip{max-width:820px}
  .game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .creator-card{grid-template-columns:auto 1fr}
  .socials{grid-column:1/-1;justify-content:center}
}
@media (max-width:820px){
  html{scroll-padding-top:64px}
  .shell{width:min(100% - 24px,1480px)}
  .header-inner{height:64px;grid-template-columns:auto auto auto;justify-content:space-between;gap:8px}
  .brand-logo{width:50px;height:40px}
  .brand-text strong{font-size:23px}
  .brand-text small{display:none}
  .menu-toggle{display:block;order:2}
  .music-button{order:3;padding:0 10px}
  .music-button>span:nth-child(2){display:none}
  .main-nav{
    display:none;
    position:absolute;
    top:64px;left:12px;right:12px;
    flex-direction:column;
    align-items:stretch;
    padding:8px;
    border:1px solid #294a69;
    border-radius:12px;
    background:rgba(5,20,37,.98);
    box-shadow:var(--shadow);
  }
  .main-nav.open{display:flex}
  .main-nav a{text-align:center}
  .top-stage{padding-top:22px}
  .hero-copy{padding-bottom:14px}
  .hero-copy h1{font-size:38px}
  .hero-subtitle{font-size:14px}
  .featured-heading h2{font-size:20px}
  .showcase-grid{grid-template-columns:1fr;max-width:720px}
  .showcase-media{aspect-ratio:16/9}
  .benefit-strip{grid-template-columns:repeat(2,1fr);max-width:560px;gap:8px 0}
  .benefit-item:nth-child(2)::after{display:none}
  .catalog-head{align-items:flex-start;flex-direction:column}
  .filters{justify-content:flex-start}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .creator-card{grid-template-columns:1fr;text-align:center}
  .creator-logo{margin:auto}
  .socials{grid-column:auto;flex-direction:column;align-items:stretch}
  .footer-inner{flex-direction:column;gap:4px}
}
@media (max-width:560px){
  .brand-logo{width:44px}
  .brand-text strong{font-size:20px}
  .hero-copy h1{font-size:33px}
  .hero-kicker{font-size:8px;letter-spacing:1.5px}
  .hero-subtitle{font-size:13px}
  .featured-heading{gap:10px}
  .featured-heading h2{font-size:18px}
  .showcase-grid{grid-template-columns:1fr}
  .showcase-media{aspect-ratio:16/9}
  .benefit-strip{margin-top:12px}
  .benefit-item{justify-content:flex-start;padding-left:8px}
  .benefit-item svg{width:25px;height:25px}
  .catalog-title h2{font-size:25px}
  .filters{gap:5px}
  .filter{padding:0 10px;font-size:11px}
  .game-grid{grid-template-columns:1fr;gap:12px}
  .game-card-title{font-size:15px}
  .game-card-meta{font-size:11px}
  .creator-logo{width:92px}
  .creator-copy h2{font-size:14px}
}
@media (max-width:360px){
  .game-grid{grid-template-columns:1fr}
  .showcase-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}

@media (max-width: 980px){
  .filters{justify-content:flex-start}
  .filter-cluster{gap:6px}
}
@media (max-width: 620px){
  .filters{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    width:100%;
  }
  .filter-separator{
    width:100%;
    height:1px;
    margin:1px 0;
    background:linear-gradient(90deg,transparent,#426480 15%,#426480 85%,transparent);
  }
  .filter-cluster{width:100%}
  .filter-label{width:100%;margin-bottom:1px}
  .filter{min-height:34px}
}

.social-icon--linkedin{border-radius:3px;background:#fff;color:#0a66c2;font-size:12px;font-weight:900}
@media (max-width: 820px){
  .socials{max-width:none;width:100%;justify-content:center}
}
@media (max-width: 620px){
  .filter-cluster--themes{padding-top:9px}
  .filter-cluster--themes .filter{font-size:11px;padding:0 9px}
}

/* V13 — títulos de Destaques e Catálogo padronizados */
.featured-heading.catalog-title{
  display:flex;align-items:center;justify-content:flex-start;
  gap:11px;max-width:1320px;margin:18px auto 12px;
}
.featured-heading.catalog-title h2{font-size:28px;font-weight:800;line-height:1}
.featured-heading.catalog-title .eyebrow{margin-bottom:1px}
@media (max-width:820px){
  .featured-heading.catalog-title h2{font-size:25px}
}

/* V14 — filtros organizados em três linhas, com ação global Todos após Disponibilidade */
.filters{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%}
.filter-row{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  width:100%;min-height:52px;padding:9px 4px;
  border-top:1px solid rgba(101,153,197,.28);
}
.filter-row:first-child{border-top:0}
.filter-row-label{
  width:143px;flex:0 0 143px;
  color:#adcbe6;text-transform:uppercase;
  font-size:12px;font-weight:800;letter-spacing:.8px;
}
.filter-row .filter{font-size:12px;min-height:35px;padding:0 13px}

/* V14 — tabela da classificação completa */
.category-table-section{margin-top:26px;padding-bottom:12px}
.category-table-heading{margin-bottom:12px}
.category-table-heading h3{
  font-family:"Baloo 2",sans-serif;font-size:26px;line-height:1.2;
  margin:0 0 3px;color:#f3f8ff;
}
.category-table-heading p{margin:0;color:#b5cbe1;font-size:14px;line-height:1.55}
.category-table-scroll{
  border:1px solid rgba(111,164,216,.45);border-radius:12px;
  overflow:auto;background:rgba(6,20,36,.92);
  box-shadow:0 12px 35px rgba(0,0,0,.22);
}
.category-table{width:100%;border-collapse:collapse;min-width:720px;font-size:13px}
.category-table th{
  background:#102a48;color:#e6f4ff;
  text-align:left;font-size:13px;font-weight:800;white-space:nowrap;
  padding:13px 16px;border-bottom:1px solid #315b81;
}
.category-table td{
  color:#bcd1e5;padding:11px 16px;
  border-bottom:1px solid rgba(92,141,187,.2);
  line-height:1.5;vertical-align:top;
}
.category-table tr:nth-child(even) td{background:rgba(26,58,88,.22)}
.category-table tbody tr:last-child td{border-bottom:0}
.category-table tbody tr:hover td{background:rgba(35,98,149,.22)}
.category-table .category-table-name{color:#f0f7ff;font-weight:750;white-space:nowrap}
.category-table .category-table-status{white-space:nowrap}
.social-icon--pinterest{
  display:grid;place-items:center;border-radius:50%;
  background:#fff;color:#bd1e27;font:bold italic 19px Georgia,serif;
}

/* V14 — tipografia levemente ampliada (sem alterar título principal, rodapé e contato) */
.main-nav a{font-size:15px}
.music-button{font-size:14px}
.hero-subtitle{font-size:17px;line-height:1.62}
.benefit-item strong{font-size:16px}
.benefit-item small{font-size:13px}
.featured-heading.catalog-title h2,.catalog-title h2{font-size:30px}
.catalog-title .eyebrow{font-size:11px}
.platform-heading h3{font-size:14px}
.platform-heading small{font-size:12px}
.game-card-title{font-size:16px}
.game-card-meta{font-size:12px}
.card-status{font-size:10px}
.dialog-content>p:last-of-type{font-size:16px}
@media(max-width:820px){
  .filter-row{gap:7px}
  .filter-row-label{width:100%;flex-basis:100%;font-size:11px}
  .featured-heading.catalog-title h2,.catalog-title h2{font-size:27px}
  .hero-subtitle{font-size:15px}
}
@media(max-width:620px){
  .filter-row .filter{font-size:12px;min-height:34px;padding:0 10px}
  .game-card-title{font-size:16px}
  .game-card-meta{font-size:12px}
  .category-table-heading h3{font-size:23px}
  .category-table-heading p{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  body::before{background-position:center center,center top}
}

/* V15 — fichas clicáveis em cartões, destaques e tabela. */
.showcase-card.js-game-modal { display:block; width:100%; font:inherit; }
.category-table-link {
  appearance:none;
  border:0;
  padding:2px 1px;
  margin:0;
  background:transparent;
  color:#b7e1ff;
  font:inherit;
  font-weight:800;
  text-align:left;
  cursor:pointer;
  text-underline-offset:3px;
  text-decoration:underline;
  text-decoration-color:rgba(117,197,255,.45);
  transition:color .15s ease,text-decoration-color .15s ease;
}
.category-table-link:hover {
  color:#fff;
  text-decoration-color:#fff;
}
.category-table-link:focus-visible {
  outline:2px solid #69cbff;
  outline-offset:3px;
  border-radius:3px;
}
.dialog-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:16px; }
.dialog-actions .dialog-status { margin-top:0; }
.dialog-status--live { color:#9af1c5; border-color:rgba(70,203,135,.55); background:rgba(25,145,84,.12); }
.dialog-play {
  display:inline-flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  padding:12px 20px;
  min-height:44px;
  border-radius:10px;
  border:1px solid #54c88a;
  background:linear-gradient(180deg,#20b96f,#148d53);
  color:#fff;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 7px 20px rgba(7,111,66,.25);
  transition:transform .15s ease,filter .15s ease;
}
.dialog-play:hover {filter:brightness(1.13); transform:translateY(-1px);}
.dialog-play:focus-visible{outline:3px solid #b3ffdc; outline-offset:3px;}
.dialog-play[hidden] {display:none!important;}
.dialog-play-arrow {font-size:18px; line-height:1;}
@media(max-width:620px){
  .dialog-actions{align-items:stretch; flex-direction:column;}
  .dialog-play{width:100%;}
}


/* V16: estado vazio para combinações de filtros sem jogos */
.empty-results{
  max-width:740px;margin:22px auto 12px;padding:30px 25px;
  border:1px solid rgba(120,175,224,.43);border-radius:16px;
  background:linear-gradient(145deg,rgba(9,31,55,.94),rgba(7,19,35,.91));
  box-shadow:0 14px 35px rgba(0,0,0,.24);
  text-align:center;color:#d9eafa;
}
.empty-results[hidden]{display:none!important}
.empty-results-icon{display:block;font-size:32px;margin-bottom:8px}
.empty-results h3{font-size:20px;line-height:1.28;margin:0 0 8px;color:#fff;font-weight:800}
.empty-results p{font-size:14px;line-height:1.55;margin:0 auto 18px;color:#aec4db;max-width:520px}
.empty-results-clear{
  min-height:41px;padding:9px 18px;border:1px solid #399ae9;
  border-radius:10px;background:#0e64ab;color:#fff;
  font:700 13px 'Inter',sans-serif;cursor:pointer;transition:background .15s ease;
}
.empty-results-clear:hover{background:#168adf}
.empty-results-clear:focus-visible{outline:3px solid #a8dcff;outline-offset:3px}

/* V16: miniatura flutuante da tabela, visível além da área de rolagem horizontal */
.game-preview{
  position:fixed;left:0;top:0;z-index:500;
  width:246px;padding:7px;border-radius:11px;
  background:rgba(7,22,39,.98);border:1px solid rgba(100,175,244,.7);
  box-shadow:0 14px 36px rgba(0,0,0,.6);pointer-events:none;
}
.game-preview[hidden]{display:none!important}
.game-preview img{width:100%;aspect-ratio:16/9;display:block;border-radius:6px;object-fit:cover}
.game-preview span{display:block;color:#f3faff;font-weight:800;font-size:12px;padding:8px 3px 2px;text-align:center}
@media (max-width:620px){
  .empty-results{padding:23px 15px}
  .empty-results h3{font-size:18px}
  .game-preview{width:192px}
}

/* V19 — Jogos em destaque: distingue jogos em desenvolvimento dos disponíveis. */
.showcase-card:not(.showcase-card--live) .showcase-footer{
  background:linear-gradient(180deg,#183654,#10283f);
}
.showcase-card:not(.showcase-card--live) .showcase-footer small{color:#b2ddf0;}

/* V22: hero subtitle line breaks */
.hero-subtitle .hero-portrait-break { display: none; }
@media (max-width: 820px) and (orientation: portrait) {
  .hero-subtitle .hero-portrait-break { display: initial; }
}

/* V24: cards de redes sociais alinhados, seis itens em grade 3x2. */
.creator-card .socials {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  width:min(100%,690px);
  max-width:690px;
  justify-content:stretch;
  align-items:stretch;
  justify-self:end;
}
.creator-card .socials a {
  width:100%; min-width:0; min-height:46px;
  padding:8px 10px; box-sizing:border-box;
  white-space:normal; text-align:center;
  overflow-wrap:anywhere;
}
.creator-card .socials a .social-icon {flex-shrink:0}
@media(max-width:1180px){.creator-card .socials{justify-self:center}}
@media(max-width:820px){
  .creator-card .socials{grid-column:auto;flex-direction:initial;align-items:stretch;justify-self:center}
}
@media(max-width:520px) and (orientation:portrait){
  .creator-card .socials{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* V27 — Destaques: carrossel responsivo horizontal com snap, arrasto e controles. */
.showcase-carousel{
  --showcase-gap:18px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:10px;
  max-width:1430px;
  margin:0 auto;
}
.showcase-carousel .showcase-grid{
  display:grid;
  grid-auto-flow:column;
  grid-template-columns:none;
  grid-auto-columns:calc((100% - var(--showcase-gap))/2);
  gap:var(--showcase-gap);
  width:100%;
  max-width:none;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-inline:contain;
  touch-action:pan-x pan-y;
  -webkit-overflow-scrolling:touch;
}
.showcase-carousel .showcase-grid::-webkit-scrollbar{display:none}
.showcase-carousel .showcase-grid.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.showcase-carousel .showcase-grid .showcase-card{
  width:100%;
  min-width:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.showcase-nav{
  display:grid;
  place-items:center;
  width:44px;
  height:55px;
  border:1px solid rgba(101,184,253,.7);
  border-radius:13px;
  background:linear-gradient(165deg,#16395d,#0b1e36);
  color:#eaf9ff;
  font-size:45px;
  font-weight:400;
  line-height:1;
  cursor:pointer;
  box-shadow:0 5px 22px rgba(0,0,0,.3);
  transition:background .15s ease,opacity .15s ease,transform .15s ease;
}
.showcase-nav:not(:disabled):hover{background:linear-gradient(160deg,#21649c,#0c2f54);transform:scale(1.04)}
.showcase-nav:disabled{opacity:.28;cursor:default}
.showcase-nav:focus-visible{outline:3px solid #78d1ff;outline-offset:3px}
@media (orientation:portrait){
  .showcase-carousel .showcase-grid{grid-auto-columns:100%}
}
@media (max-width:620px){
  .showcase-carousel{--showcase-gap:12px;grid-template-columns:30px minmax(0,1fr) 30px;gap:5px}
  .showcase-nav{width:30px;height:48px;border-radius:9px;font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  .showcase-carousel .showcase-grid{scroll-behavior:auto}
}

/* V27 — modal: visualização generosa em landscape; a imagem abre jogos disponíveis. */
.dialog-media-link{display:block;width:100%;height:100%;position:relative;cursor:default}
.dialog-media-link[href]{cursor:pointer}
.dialog-media-link[href]::after{
  content:"Clique na imagem para jogar ↗";
  position:absolute;right:14px;bottom:13px;
  padding:9px 14px;border:1px solid rgba(134,242,192,.6);border-radius:9px;
  color:#fff;background:rgba(4,46,35,.85);
  font-size:12px;font-weight:800;
  box-shadow:0 5px 16px rgba(0,0,0,.3);
  opacity:0;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease;
  pointer-events:none;
}
.dialog-media-link[href]:hover::after,.dialog-media-link[href]:focus-visible::after{opacity:1;transform:translateY(0)}
.dialog-media-link[href]:focus-visible{outline:3px solid #5ce0a7;outline-offset:-3px}
@media (orientation:landscape) and (min-width:700px){
  .game-dialog{
    width:min(1150px,calc(100vw - 48px));
    max-width:none;
    max-height:calc(100dvh - 26px);
    overflow-y:auto;
  }
  .dialog-media{width:100%;aspect-ratio:16/9;max-height:none;}
  .dialog-media img{object-fit:contain}
}
@media (max-width:699px), (orientation:portrait){
  .game-dialog{max-height:calc(100dvh - 22px);overflow-y:auto}
}

/* V28 — Estados de produção e tabela expansível. */
.filter--planning.active{
  background:linear-gradient(180deg,#637b9a,#425773);
  border-color:#95b3d4;
  box-shadow:0 5px 14px rgba(72,101,137,.22);
}
.card-status--development{
  color:#ffe9b7;background:rgba(102,57,11,.9);
  border-color:rgba(255,187,97,.55);
}
.card-status--planning{
  color:#d6e5f4;background:rgba(24,48,77,.88);
  border-color:rgba(159,183,216,.4);
}
.category-table-section{margin-top:26px}
.category-table-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:43px;padding:11px 20px;
  border:1px solid rgba(103,190,250,.65);
  border-radius:10px;color:#e9f8ff;
  background:linear-gradient(160deg,#184776,#0c2a4c);
  font-size:14px;font-weight:800;cursor:pointer;
  transition:background .15s,transform .15s;
}
.category-table-toggle::after{
  content:'▾';display:inline-block;margin-left:12px;
  font-size:18px;line-height:1;transition:transform .15s;
}
.category-table-toggle[aria-expanded="true"]::after{transform:rotate(180deg)}
.category-table-toggle:hover{background:linear-gradient(160deg,#245a8b,#12375f)}
.category-table-toggle:focus-visible{outline:3px solid #7ed4ff;outline-offset:3px}
.category-table-details{margin-top:15px}
.category-table-details[hidden]{display:none!important}


/* V33 — Idiomas com bandeiras, controle separado de efeitos e avisos compactos. */
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0}
.header-actions .music-button{white-space:nowrap;flex:0 0 auto}
.header-actions .music-button .button-label{font-size:13px}
.header-actions .music-button .music-note{flex-shrink:0}
.language-button{
  display:grid;place-items:center;flex:0 0 auto;
  width:41px;height:41px;border-radius:11px;
  border:1px solid rgba(145,188,230,.42);
  background:rgba(4,16,31,.74);line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.language-button:hover{border-color:#55baff;background:rgba(15,51,86,.88);transform:translateY(-1px);box-shadow:0 8px 18px rgba(6,17,31,.28)}
.language-button:focus-visible{outline:3px solid #69cfff;outline-offset:3px}
.flag-icon{
  display:block;width:26px;height:18px;border-radius:4px;overflow:hidden;
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 2px 6px rgba(0,0,0,.28);background-size:cover;background-position:center;
}
.flag-br{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 38'%3E%3Crect width='54' height='38' rx='4' fill='%23009739'/%3E%3Cpath d='M27 4 47 19 27 34 7 19Z' fill='%23FEDF00'/%3E%3Ccircle cx='27' cy='19' r='8.6' fill='%23002776'/%3E%3Cpath d='M17.5 20.4c5.4-4 13.6-4.9 19.3-1.9' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");}
.flag-us{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 38'%3E%3Cdefs%3E%3CclipPath id='r'%3E%3Crect width='54' height='38' rx='4'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23r)'%3E%3Crect width='54' height='38' fill='%23fff'/%3E%3Cg fill='%23B22234'%3E%3Crect width='54' height='2.92' y='0'/%3E%3Crect width='54' height='2.92' y='5.84'/%3E%3Crect width='54' height='2.92' y='11.68'/%3E%3Crect width='54' height='2.92' y='17.52'/%3E%3Crect width='54' height='2.92' y='23.36'/%3E%3Crect width='54' height='2.92' y='29.2'/%3E%3Crect width='54' height='2.92' y='35.04'/%3E%3C/g%3E%3Crect width='23.5' height='20.4' fill='%233C3B6E'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='3.4' cy='3.2' r='1.05'/%3E%3Ccircle cx='8.2' cy='3.2' r='1.05'/%3E%3Ccircle cx='13' cy='3.2' r='1.05'/%3E%3Ccircle cx='17.8' cy='3.2' r='1.05'/%3E%3Ccircle cx='5.8' cy='6.6' r='1.05'/%3E%3Ccircle cx='10.6' cy='6.6' r='1.05'/%3E%3Ccircle cx='15.4' cy='6.6' r='1.05'/%3E%3Ccircle cx='3.4' cy='10' r='1.05'/%3E%3Ccircle cx='8.2' cy='10' r='1.05'/%3E%3Ccircle cx='13' cy='10' r='1.05'/%3E%3Ccircle cx='17.8' cy='10' r='1.05'/%3E%3Ccircle cx='5.8' cy='13.4' r='1.05'/%3E%3Ccircle cx='10.6' cy='13.4' r='1.05'/%3E%3Ccircle cx='15.4' cy='13.4' r='1.05'/%3E%3Ccircle cx='3.4' cy='16.8' r='1.05'/%3E%3Ccircle cx='8.2' cy='16.8' r='1.05'/%3E%3Ccircle cx='13' cy='16.8' r='1.05'/%3E%3Ccircle cx='17.8' cy='16.8' r='1.05'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
.sound-note{font-size:18px}
.catalog-intro{
  width:100%;margin:0 0 18px;
  padding:10px 15px 9px;
  border:1px solid rgba(100,180,243,.35);border-radius:13px;
  background:linear-gradient(105deg,rgba(9,32,56,.88),rgba(9,29,49,.72));
  color:#d6e9f9;
  font-size:12px;line-height:1.48;
}
.catalog-intro p{margin:0}
.catalog-intro strong{color:#fff}
.catalog-intro .free-note{display:flex;align-items:center;justify-content:center;gap:9px;text-align:center;font-size:13px}
.catalog-intro .free-note>span:first-child{font-size:20px;line-height:1}
.catalog-intro .achievement-note{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:7px;padding-top:7px;border-top:1px solid rgba(128,190,232,.16);text-align:center}
.catalog-intro .achievement-note>span:first-child{font-size:21px;line-height:1}
.catalog-intro .achievement-note p+p{margin-top:2px}
html[lang^="en"] .dialog-media-link[href]::after{content:"Click image to play ↗"}
@media (max-width:1160px){
  .header-inner{gap:12px}
  .main-nav{gap:2px}
  .main-nav a{padding:9px 11px;font-size:13px}
  .header-actions{gap:5px}
  .header-actions .music-button{padding:0 9px;gap:6px}
  .header-actions .music-button .button-label,.header-actions #musicButton>span:nth-child(2){display:none}
}
@media (max-width:820px){
  .header-inner{grid-template-columns:auto auto auto;justify-content:space-between;gap:5px}
  .brand{order:0;gap:6px}
  .menu-toggle{order:2}
  .header-actions{order:3;gap:5px}
  .header-actions .music-button{order:initial;width:38px;height:38px;min-height:38px;padding:0;justify-content:center;border-radius:11px}
  .header-actions .music-button .music-note{width:26px;height:26px}
  .header-actions .music-dot,.header-actions .music-button .button-label{display:none}
  .language-button{width:38px;height:38px}
  .catalog-intro{margin-bottom:15px}
}
@media (max-width:440px){
  .header-inner{gap:3px}
  .brand-logo{width:37px;height:35px}
  .brand-text strong{font-size:17px}
  .menu-toggle{padding:5px}
  .header-actions{gap:3px}
  .header-actions .music-button{width:33px;height:34px;min-height:34px}
  .header-actions .music-button .music-note{width:25px;height:25px;font-size:15px}
  .language-button{width:34px;height:34px}
  .catalog-intro{padding:9px 10px;font-size:11px}
  .catalog-intro .free-note{font-size:12px}
}

/* Feedback visual do botão de efeitos sonoros, inclusive em telas pequenas. */
.sound-button[aria-pressed="false"] .sound-note{color:#91a8c1;border-color:rgba(145,168,193,.32);opacity:.75}
.sound-button[aria-pressed="false"]{border-color:rgba(115,145,171,.30);background:rgba(4,13,26,.72)}

@media (max-width:820px){.flag-icon{width:24px;height:16px}}
@media (max-width:440px){.flag-icon{width:21px;height:14px;border-radius:3px}}

/* V35 — controles de tela cheia e mensagens sem interromper a navegação. */
.fullscreen-button[hidden]{display:none!important}
.fullscreen-button .music-note{font-size:21px;line-height:1}
.fullscreen-button[aria-pressed="true"]{border-color:#52cda0;background:rgba(15,72,57,.75)}
.header-actions .music-button:focus-visible,.menu-toggle:focus-visible{
  outline:3px solid #89d9ff;outline-offset:3px;
}
.fullscreen-status{
  position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));
  z-index:1600;transform:translateX(-50%);
  width:max-content;max-width:min(560px,calc(100% - 24px));
  padding:12px 16px;border:1px solid #5387b3;border-radius:12px;
  background:rgba(6,27,47,.98);color:#f5faff;box-shadow:var(--shadow);
  font-size:13px;line-height:1.5;text-align:center;pointer-events:none;
}
.fullscreen-exit{
  display:none;
  position:fixed;top:max(10px,env(safe-area-inset-top));
  right:max(10px,env(safe-area-inset-right));z-index:1200;
  min-height:44px;padding:10px 14px;
  border:1px solid #81b8e2;border-radius:12px;
  background:rgba(5,24,42,.94);color:#fff;box-shadow:0 5px 20px rgba(0,0,0,.35);
  font:700 12px "Inter",system-ui,sans-serif;cursor:pointer;
}
.fullscreen-exit:hover{background:#154a72}
.fullscreen-exit:focus-visible{outline:3px solid #9de3ff;outline-offset:3px}
#fullscreenStatus[hidden],#fullscreenExit[hidden]{display:none!important}
body.dialog-open .fullscreen-exit{display:none}

/* V35 — a página continua usando a rolagem nativa do navegador.
   A densidade muda com a largura disponível, sem simular um viewport de desktop. */
@media (max-width:820px), (max-width:1024px) and (pointer:coarse), (max-width:1024px) and (max-height:520px){
  html{scroll-padding-top:calc(64px + env(safe-area-inset-top))}
  .shell{
    width:100%;
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }
  .site-header{
    padding-top:env(safe-area-inset-top);
    transition:transform .2s ease;
  }
  html.mobile-header-hidden .site-header{transform:translateY(-100%)}
  html.mobile-header-hidden #fullscreenExit:not([hidden]){display:block}
  html.mobile-menu-open .site-header,
  html.mobile-header-hidden body.dialog-open .site-header{transform:none}
  .header-inner{
    height:54px;grid-template-columns:auto auto auto;
    justify-content:space-between;gap:6px;
  }
  .brand{order:0;gap:5px;min-width:0}
  .brand-logo{width:36px;height:34px}
  .brand-text strong{font-size:19px}
  .brand-text small{display:none}
  .menu-toggle{display:block;order:2;width:40px;height:40px;padding:8px}
  .menu-toggle span{margin:5px 0}
  .header-actions{order:3;gap:4px}
  .header-actions .music-button{
    order:initial;width:40px;height:40px;min-height:40px;padding:0;
    gap:0;justify-content:center;border-radius:11px;
  }
  .header-actions .music-button .music-note{width:26px;height:26px}
  .header-actions .music-button .button-label,
  .header-actions #musicButton>span:nth-child(2),
  .header-actions .music-dot{display:none}
  .header-actions .fullscreen-button .music-note{font-size:21px}
  .language-button{width:40px;height:40px}
  .flag-icon{width:24px;height:16px}
  .main-nav{
    display:none;position:absolute;
    top:calc(54px + env(safe-area-inset-top));
    left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
    flex-direction:column;align-items:stretch;gap:2px;padding:8px;
    border:1px solid #294a69;border-radius:12px;
    background:rgba(5,20,37,.98);box-shadow:var(--shadow);
  }
  .main-nav.open{display:flex}
  .main-nav a{display:grid;place-items:center;min-height:44px;text-align:center;font-size:14px}

  .top-stage{padding-top:16px}
  .hero-copy{padding-bottom:4px;text-align:center}
  .hero-copy h1{font-size:clamp(25px,5.3vw,34px);line-height:1.1;letter-spacing:-.5px}
  .hero-subtitle{max-width:740px;margin-top:6px;font-size:12px;line-height:1.45}
  .hero-subtitle .hero-portrait-break{display:none}
  .benefit-strip{grid-template-columns:repeat(4,minmax(0,1fr));max-width:740px;margin:10px auto 2px;gap:0}
  .benefit-item{flex-direction:column;justify-content:center;gap:3px;min-height:54px;padding:0 3px}
  .benefit-item svg{width:19px;height:19px;flex-shrink:0}
  .benefit-item span{gap:1px;line-height:1.2}
  .benefit-item strong{font-size:10px}
  .benefit-item small{font-size:9px}
  .benefit-item:not(:last-child)::after{display:block;height:30px}
  .featured-heading.catalog-title{gap:8px;margin:12px auto 8px}
  .featured-heading.catalog-title h2,.catalog-title h2{font-size:22px}
  .catalog-title .eyebrow{font-size:9px;letter-spacing:1.1px}
  .catalog-icon{font-size:23px}
  .showcase-carousel{--showcase-gap:8px;grid-template-columns:28px minmax(0,1fr) 28px;gap:4px}
  .showcase-carousel .showcase-grid{grid-auto-columns:calc((100% - var(--showcase-gap))/2)}
  .showcase-carousel .showcase-card{border-radius:9px}
  .showcase-nav{width:28px;height:44px;border-radius:8px;font-size:31px}
  .showcase-media{aspect-ratio:16/9}
  .showcase-footer{min-height:53px;gap:3px;padding:7px}
  .showcase-footer strong{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    white-space:normal;overflow:hidden;font-size:12px;line-height:1.2;
  }
  .showcase-footer small{font-size:7px;letter-spacing:.25px;line-height:1.25}
  .showcase-arrow{width:14px;height:18px;font-size:16px}

  .catalog-section{padding-top:14px;padding-bottom:22px}
  .catalog-intro{margin-bottom:12px;padding:9px 10px;font-size:11px;line-height:1.4}
  .catalog-intro .free-note{gap:6px;font-size:12px}
  .catalog-intro .free-note>span:first-child{font-size:17px}
  .catalog-intro .achievement-note{gap:7px;margin-top:6px;padding-top:6px}
  .catalog-intro .achievement-note>span:first-child{font-size:18px}
  .catalog-head{gap:10px;padding-bottom:8px}
  .filters{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .filter-row{
    flex-wrap:nowrap;gap:6px;min-height:0;padding:7px 0 9px;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
    scrollbar-color:#497aa6 transparent;touch-action:pan-x pan-y;
  }
  .filter-row-label{width:auto;flex:0 0 auto;font-size:10px;letter-spacing:.3px;white-space:nowrap;margin-right:3px}
  .filter-row .filter{flex:0 0 auto;min-height:40px;padding:0 11px;font-size:11px;white-space:nowrap}
  .filter:focus-visible{outline:2px solid #9cdeff;outline-offset:2px}
  .platform-group{margin-top:9px}
  .platform-heading{min-height:25px;margin-bottom:6px}
  .platform-heading h3{font-size:12px}
  .platform-heading small{font-size:11px}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .game-card{border-radius:8px}
  .game-card-body{padding:8px}
  .game-card-title{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    min-height:2.44em;white-space:normal;overflow:hidden;overflow-wrap:anywhere;
    font-size:13px;line-height:1.22;
  }
  .game-card-meta{margin-top:4px;font-size:10px;gap:4px}
  .game-card-meta em{display:none}
  .card-status{top:4px;right:4px;max-width:calc(100% - 8px);padding:3px 5px;font-size:8px;letter-spacing:.15px;line-height:1.2;text-align:center}

  .creator-card{grid-template-columns:68px minmax(0,1fr);gap:10px;padding:12px;text-align:center}
  .creator-logo{width:68px;height:48px;margin:auto}
  .creator-copy .eyebrow{font-size:11px;letter-spacing:1px}
  .creator-copy h2{font-size:12px;line-height:1.4}
  .creator-copy p{font-size:11px}
  .creator-copy .creator-message{font-size:10px}
  .creator-card .socials{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
  .creator-card .socials a{min-height:42px;padding:7px 5px;gap:5px;font-size:10px}
  .social-icon{width:20px;height:20px}
  .social-icon--instagram svg,.social-icon--youtube svg{width:20px;height:20px}
  .category-table-section{margin-top:18px}
  .category-table-toggle{min-height:44px;padding:10px 12px;font-size:12px}
  .category-table-heading h3{font-size:21px}
  .category-table-heading p{font-size:12px}
  .site-footer{padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .footer-inner{flex-direction:column;gap:4px;font-size:9px}
  .game-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto}
  .dialog-close{width:42px;height:42px;top:7px;right:7px}
  .dialog-content{padding:16px}
  .dialog-content h2{font-size:26px;line-height:1.15}
  .dialog-content>p:last-of-type{font-size:14px;line-height:1.5}
}

@media (max-width:380px){
  .brand-text{display:none}
  .header-actions{gap:5px}
  .header-inner{gap:8px}
  .showcase-footer{padding:6px;min-height:56px}
  .showcase-footer strong{font-size:11px}
  .showcase-footer small{font-size:6.5px}
  .showcase-arrow{display:none}
}

@media (min-width:600px) and (max-width:820px), (min-width:600px) and (max-width:1024px) and (pointer:coarse), (min-width:600px) and (max-width:1024px) and (max-height:520px){
  .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .showcase-carousel .showcase-grid{grid-auto-columns:calc((100% - 2 * var(--showcase-gap))/3)}
  .benefit-item{flex-direction:row;gap:7px;min-height:39px}
  .benefit-item strong{font-size:11px}
  .benefit-item small{font-size:10px}
  .hero-copy h1{font-size:32px}
  .hero-subtitle{font-size:13px}
  .showcase-footer strong{font-size:13px}
}

@media (min-width:900px) and (max-width:1024px) and (pointer:coarse), (min-width:900px) and (max-width:1024px) and (max-height:520px){
  .game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .showcase-carousel .showcase-grid{grid-auto-columns:calc((100% - 3 * var(--showcase-gap))/4)}
}

@media (orientation:landscape) and (max-width:1024px) and (max-height:520px){
  .top-stage{padding-top:10px}
  .hero-copy h1{font-size:28px}
  .hero-subtitle{margin-top:3px;font-size:12px}
  .benefit-strip{margin-top:6px}
  .featured-heading.catalog-title{margin-top:8px}
  .game-dialog[open]{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
  .game-dialog .dialog-media{position:sticky;top:0;aspect-ratio:16/9}
  .game-dialog .dialog-media img{object-fit:contain}
  .dialog-content{padding:14px}
  .dialog-content h2{font-size:23px}
  .dialog-content>p:last-of-type{font-size:13px}
  .dialog-genre{font-size:11px;margin-bottom:9px}
  .dialog-actions{gap:8px;margin-top:12px}
  .dialog-play{padding:10px 14px;font-size:13px}
}

/* V35 — quantidades definidas pela orientação em qualquer tamanho de tela. */
.showcase-card[href]{display:block;width:100%;font:inherit;text-align:left}
.showcase-card[href]:focus-visible{outline:3px solid #89d9ff;outline-offset:-3px}
.filter-row .filter{font-size:14px}
.filter-row-label{font-size:12px}
.dialog-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.dialog-back{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:9px 14px;border:1px solid #5685ae;border-radius:9px;
  background:#143c61;color:#fff;font:700 14px "Inter",system-ui,sans-serif;
  cursor:pointer;
}
.dialog-back:hover{background:#1e5382}
.dialog-back:focus-visible{outline:3px solid #9de3ff;outline-offset:2px}
.dialog-media-link.is-back{cursor:pointer}
.dialog-media-link.is-back:focus-visible{outline:3px solid #9de3ff;outline-offset:-4px}

@media (orientation:portrait){
  .showcase-carousel .showcase-grid{grid-auto-columns:100%}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (orientation:landscape){
  .showcase-carousel .showcase-grid{grid-auto-columns:calc((100% - var(--showcase-gap))/2)}
  .game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .game-dialog{
    position:fixed;
    top:env(safe-area-inset-top);left:env(safe-area-inset-left);
    right:auto;bottom:auto;margin:0;
    width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
    height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-width:none;max-height:none;border-radius:0;overflow:hidden;
  }
  .game-dialog[open]{
    display:grid;grid-template-columns:minmax(0,min(38%,420px)) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);align-items:stretch;
  }
  .game-dialog .dialog-content{
    grid-column:1;grid-row:1;min-width:0;min-height:0;overflow-y:auto;
    padding:18px;border-right:1px solid #3e7099;background:#0a2039;
  }
  .game-dialog .dialog-toolbar{
    position:sticky;top:-18px;z-index:2;margin:-18px -18px 0;padding:14px 18px;
    background:#0a2039;border-bottom:1px solid rgba(126,174,222,.2);
  }
  .game-dialog .dialog-media{
    grid-column:2;grid-row:1;position:relative;top:auto;
    width:100%;height:100%;min-width:0;min-height:0;max-height:none;aspect-ratio:auto;
    background:#061323;
  }
  .game-dialog .dialog-media-link{display:grid;place-items:center;width:100%;height:100%}
  .game-dialog .dialog-media img{width:100%;height:100%;object-fit:contain}
  .game-dialog .dialog-content h2{font-size:clamp(22px,2.5vw,31px);line-height:1.15}
  .game-dialog .dialog-content>p:last-of-type{font-size:14px;line-height:1.55}
}