/* GameTiozinho v30 — folha de estilos completa. */

/* Base do site */
:root {
  --black: #12091d;
  --navy: #27104c;
  --lime: #c9ff00;
  --cyan: #00e6ff;
  --pink: #ff3eb5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.page {
  min-height: 100vh;
  padding: 20px 28px 56px;
  overflow: hidden;
  color: white;
  background:
    linear-gradient(45deg, #26104c 25%, transparent 25%, transparent 75%, #26104c 75%),
    linear-gradient(45deg, #26104c 25%, #150826 25%, #150826 75%, #26104c 75%);
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  font-family: "Courier New", ui-monospace, monospace;
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: .11;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #000 4px);
}

.browserWindow {
  width: 100%;
  margin: auto;
  border: 4px outset #d9d0e4;
  background: #080e26;
  box-shadow: 14px 14px 0 rgba(0,0,0,.55);
}

.titlebar {
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 4px 3px 9px;
  color: white;
  background: linear-gradient(90deg, #33158a, #b83faf);
  font-size: 13px;
  font-weight: 900;
}
.titlebar div { display: flex; gap: 3px; }
.titlebar button { width: 23px; height: 23px; display: grid; place-items: center; padding: 0; color: #111; border: 2px outset white; background: #d7d7d7; font-weight: 900; cursor: pointer; }

.menu { display: flex; gap: 25px; padding: 7px 12px; overflow-x: auto; color: #161121; background: #c9c5cd; border-bottom: 2px inset #eee; font-size: 13px; font-weight: bold; white-space: nowrap; }
.menu a::first-letter { text-decoration: underline; }
.menu a[aria-current="page"] { color: #251078; font-weight: 900; text-shadow: 1px 1px 0 white; }

.header { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 19px 30px; border-bottom: 3px solid var(--cyan); background: #0e1234; }
.logo { display: flex; align-items: center; gap: 13px; }
.logoOrb { width: 51px; height: 51px; display: grid; place-items: center; color: #000; background: var(--lime); border: 4px solid white; box-shadow: 5px 5px 0 #b83faf; font-size: 29px; font-weight: 900; transform: rotate(-3deg); }
.logo > span:last-child { display: grid; gap: 4px; }
.logo strong { color: var(--lime); font: 900 28px/.9 "Courier New", monospace; letter-spacing: -2px; text-shadow: 2px 2px #b83faf; }
.logo strong span { color: var(--lime); }
.logo small { color: var(--cyan); font-size: 13.5px; line-height: 1.25; letter-spacing: 2px; }

.counter { padding: 7px 10px; text-align: center; color: var(--lime); border: 2px inset #aaa; background: #030711; }
.counter small { display: block; margin-bottom: 4px; color: white; font-size: 8px; }
.counter strong { color: #ff5050; font: 900 18px/1 monospace; letter-spacing: 4px; text-shadow: 0 0 8px #ff2b2b; }

.hero { position: relative; min-height: 470px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 62px; align-items: center; padding: 42px 48px 48px; background-color: #080e26; background-image: linear-gradient(rgba(0,230,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,230,255,.07) 1px, transparent 1px), radial-gradient(circle at 75% 45%, rgba(255,62,181,.18), transparent 27%); background-size: 22px 22px, 22px 22px, auto; }
.hero::before { content: "✦"; position: absolute; top: 27px; right: 41%; color: var(--pink); font-size: 30px; }
.blink { width: fit-content; margin: 0 0 17px; padding: 7px 10px; color: var(--black); background: var(--cyan); font-weight: 900; font-size: 12px; box-shadow: 5px 5px 0 #7a1ce0; }
.prototype { color: var(--pink); font-size: 9px; font-weight: 900; letter-spacing: 1.2px; }

.hero h1 { margin: 13px 0 16px; color: var(--lime); font: 900 clamp(43px,5vw,72px)/.85 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: 1px; text-shadow: 5px 5px 0 #5b26aa; } 

.hero h1 em { color: var(--lime); font-style: normal; text-shadow: 5px 5px 0 #5b26aa; }
.heroCopy > p:last-of-type { max-width: 650px; margin: 0 0 20px; color: #c8c8de; font-size: 14px; line-height: 1.55; }

.searchBox { max-width: 650px; padding: 10px; color: #17121b; border: 3px outset white; background: #c9c5cd; box-shadow: 6px 6px 0 #000; }
.searchBox label { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 900; }
.searchBox > div { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; color: #161221; background: white; border: 2px inset white; }
.searchBox svg { margin-left: 7px; }
.searchBox input { min-width: 0; height: 37px; border: 0; outline: 0; }
.searchBox button, .catalogHead button { height: 37px; padding: 0 13px; color: #111; border: 3px outset white; background: var(--lime); font-size: 11px; font-weight: 900; cursor: pointer; }

.featured { position: relative; display: grid; justify-items: center; padding: 0 23px 24px; color: #161121; border: 4px outset #fff; background: #c9c5cd; box-shadow: 10px 10px 0 var(--pink); transform: rotate(1deg); }
.featuredTitle { width: calc(100% + 46px); margin-bottom: 20px; padding: 8px; text-align: center; color: white; background: #391690; font-size: 12px; font-weight: 900; }
.gameIcon { width: 82px; height: 82px; display: grid; place-items: center; color: white; background: #ff5c2c; border: 4px solid #191126; box-shadow: 6px 6px 0 #191126; font: 900 27px/1 Impact, sans-serif; }
.genshinIcon { background: #51a7ff; }
.featured > p { margin: 16px 0 3px; font: 900 24px/1 Impact, sans-serif; letter-spacing: 1px; }
.featured > small { margin-bottom: 15px; color: #5a0da9; font-weight: 900; }
.code { width: 100%; display: flex; justify-content: space-between; align-items: center; padding-left: 13px; color: var(--lime); background: #0c0c19; border: 3px inset #888; font-size: 14px; font-weight: 900; }
.pendingCode { min-height: 45px; justify-content: center; padding-left: 0; text-align: center; }
.code button { width: 42px; height: 39px; display: grid; place-items: center; border: 2px outset white; background: var(--cyan); cursor: pointer; }
.verified { display: flex; align-items: center; gap: 7px; margin: 13px 0; color: #006329; font-size: 10px; font-weight: 900; }
.verified svg { width: 15px; height: 15px; }
.featured > a { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; color: #0d0d17; border: 3px outset white; background: var(--lime); font-size: 11px; font-weight: 900; }
.featured > a span { font-size: 21px; line-height: 11px; }

.marquee { overflow: hidden; padding: 9px 0; color: #171126; background: var(--lime); border-block: 3px solid white; font-size: 12px; font-weight: 900; white-space: nowrap; }
.marquee span { display: block; text-align: center; word-spacing: 6px; }

.catalog { padding: 29px 31px 32px; background: #111838; }
.catalogHead { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.catalogHead span { color: var(--cyan); font-size: 9px; }

.catalogHead h2 { margin: 5px 0 0; color: white; font: 400 clamp(30px, 4.62vw, 20px) / 1.065 Anton, Impact, sans-serif; text-shadow: 3px 3px 0 #c824dc; }

/* .catalogHead h2 { margin: 5px 0 0; color: white; font: 900 27px/1 Impact, sans-serif; letter-spacing: 1px; } */

.catalogHead button { display: flex; align-items: center; gap: 6px; }
.catalogHead button svg { width: 16px; height: 16px; }

.gameGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.gameCard { color: #17121f; border: 3px outset white; background: #c9c5cd; }
.cardTop, .cardFoot { display: flex; justify-content: space-between; gap: 7px; padding: 7px 8px; background: #e3e0e5; font-size: 8px; font-weight: 900; }
.cardTop span:last-child { color: #008b42; }
.cardTop span.soonStatus { color: #5a0da9; }
.cardTop span.checkingStatus { color: #8a5100; }
.cardBody { display: flex; align-items: center; gap: 12px; min-height: 97px; padding: 12px; border-block: 2px inset white; }
.tile { width: 55px; height: 55px; flex: 0 0 auto; display: grid; place-items: center; color: #111; border: 3px solid #17121f; box-shadow: 4px 4px 0 #17121f; font: 900 16px/1 Impact, sans-serif; }
.orange { background: #ff6933; }
.blue { background: #51a7ff; }
.green { background: #a8ff29; }
.violet { background: #b273ff; }
.yellow { background: #f4df62; }
.red { background: #ff6868; }
.gold { background: #ffc441; }
.amber { background: #ff9e37; }
.aqua { background: #53e0c4; }
.gray { background: #b9bdc7; }
.cardBody small { color: #5b4b6d; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.cardBody h3 { margin: 4px 0; font: 900 14px/1.05 "Courier New", monospace; }
.cardBody p { margin: 0; color: #5a0da9; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.cardFoot { align-items: center; color: #086638; }
.cardFoot a { margin-left: auto; color: #391690; }
.soonLink { margin-left: auto; color: #655b6d; }
.gameCard[hidden] { display: none; }
.searchStatus { margin: 18px 0 0; color: var(--cyan); font-size: 12px; font-weight: 900; text-align: right; }

.codesModal[hidden] { display: none; }
.codesModal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; }
.codesBackdrop { position: absolute; inset: 0; background: rgba(2, 4, 18, .82); }
.codesWindow { position: relative; width: min(560px, 100%); color: #17121f; border: 4px outset white; background: #c9c5cd; box-shadow: 12px 12px 0 var(--pink); font-family: "Courier New", ui-monospace, monospace; }
.codesTitlebar { min-height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 4px 5px 4px 10px; color: white; background: linear-gradient(90deg, #33158a, #b83faf); font-size: 12px; font-weight: 900; }
.codesTitlebar button { width: 25px; height: 25px; padding: 0; color: #111; border: 2px outset white; background: #d7d7d7; font-weight: 900; cursor: pointer; }
.codesContent { padding: 24px; }
.codesLabel { color: #5a0da9; font-size: 9px; font-weight: 900; letter-spacing: .7px; }
.codesContent h2 { margin: 8px 0 5px; font: 900 31px/1 Impact, sans-serif; letter-spacing: 1px; }
.codesContent > p { margin: 0 0 17px; color: #4b4155; font-size: 11px; line-height: 1.45; }
.codesList { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.codesList li { display: grid; grid-template-columns: 1fr auto; align-items: center; color: var(--lime); background: #0c0c19; border: 3px inset #888; }
.codesList code { padding: 11px 13px; font: 900 15px/1 "Courier New", monospace; }
.codesList button { align-self: stretch; min-width: 83px; color: #111; border: 2px outset white; background: var(--cyan); font-size: 10px; font-weight: 900; cursor: pointer; }
.codesEmpty { padding: 18px; color: #ffcf3e; background: #0c0c19; border: 3px inset #888; font-size: 12px; font-weight: 900; line-height: 1.5; text-align: center; }
.codesActions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 17px; }
.codesActions a { padding: 10px 8px; text-align: center; color: #111; border: 3px outset white; background: var(--lime); font-size: 9px; font-weight: 900; }

.statusbar { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 6px 9px; color: #17121f; background: #c9c5cd; border-top: 3px outset white; font-size: 11px; font-weight: 900; }
.statusbar span:nth-child(2) { text-align: center; }
.statusbar span:last-child { text-align: right; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 20; transform: translate(-50%, 20px); padding: 10px 14px; color: #111; background: var(--lime); border: 3px outset white; box-shadow: 5px 5px 0 #b83faf; font: 900 11px/1 "Courier New", monospace; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* PÁGINA PRINCIPAL — ESCOLHA DE ÁREA */
.homeWindow { background: #071524; }
.homeHeader { padding-block: 15px; }
.choiceScreen {
  padding: 30px 38px 36px;
  background:
    linear-gradient(rgba(0,230,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,230,255,.07) 1px, transparent 1px),
    radial-gradient(circle at 22% 34%, rgba(0,230,255,.12), transparent 24%),
    radial-gradient(circle at 78% 34%, rgba(255,62,181,.13), transparent 24%),
    #071524;
  background-size: 22px 22px, 22px 22px, auto, auto, auto;
}
.choiceIntro { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; margin-bottom: 22px; }
.choiceIntro > span { grid-column: 1 / -1; margin-bottom: -12px; color: var(--cyan); font-size: 12px; font-weight: 900; letter-spacing: 1px; }
.choiceIntro h1 { margin: 0; color: var(--lime); font: 900 clamp(34px,4.5vw,57px)/.86 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: 1px; text-shadow: 4px 4px 0 #5738b7; }
.choiceIntro p { max-width: 440px; margin: 0; color: #e4e9f5; font-size: 16px; line-height: 1.45; }
.choiceGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }
.choiceCard { position: relative; min-height: 380px; display: flex; flex-direction: column; padding: 0 25px 24px; color: #13101c; border: 4px outset white; background: #c9c5cd; transition: transform .12s ease, box-shadow .12s ease; }
.choiceCard:hover,
.choiceCard:focus-visible { transform: translate(-3px, -3px); outline: 3px solid white; }
.choiceCardIngame { box-shadow: 10px 10px 0 #9fe0ad; }
.choiceCardRedeem { box-shadow: 10px 10px 0 var(--pink); }
.choiceCardIngame:hover,
.choiceCardIngame:focus-visible { box-shadow: 14px 14px 0 #9fe0ad; }
.choiceCardRedeem:hover,
.choiceCardRedeem:focus-visible { box-shadow: 14px 14px 0 var(--pink); }
.choiceCardTop { display: flex; justify-content: space-between; gap: 14px; margin: 0 -25px 21px; padding: 9px 12px; color: white; font-size: 12px; font-weight: 900; }
.choiceCardIngame .choiceCardTop { background: linear-gradient(90deg, #3e8256, #6dbb83); }
.choiceCardRedeem .choiceCardTop { background: linear-gradient(90deg, #6b1261, #c62e96); }
.choiceCardTop span:last-child { color: var(--lime); }
.choiceIcon { width: 70px; height: 70px; display: grid; place-items: center; margin-bottom: 18px; color: #06101c; border: 4px solid #181221; box-shadow: 5px 5px 0 #181221; font: 900 25px/1 "Courier New", monospace; }
.choiceCardIngame .choiceIcon { background: var(--lime); }
.choiceCardRedeem .choiceIcon { background: var(--lime); }
.choiceType { font-size: 12px; font-weight: 900; letter-spacing: .4px; }
.choiceCard h2 { margin: 8px 0 13px; font: 900 clamp(34px,4vw,54px)/.84 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: 1px; }
.choiceCardIngame h2 { color: #438b5d; text-shadow: 2px 2px 0 white; }
.choiceCardRedeem h2 { color: #8c176e; text-shadow: 2px 2px 0 white; }
.choiceCard ul { display: grid; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 13px; font-weight: 900; }
.choiceCard li::before { content: "■"; margin-right: 8px; color: #4d9a67; }
.choiceCardRedeem li::before { color: #a31e7f; }
.choiceCard > strong { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 13px; color: #07111e; border: 3px outset white; font-size: 14px; }
.choiceCardIngame > strong { background: var(--lime); }
.choiceCardRedeem > strong { background: var(--lime); }
.choiceCard > strong span { font-size: 23px; line-height: 10px; }

.homeRule { width: min(860px, 100%); margin: 32px auto 0; color: #17121f; border: 4px outset white; background: #c9c5cd; box-shadow: 9px 9px 0 var(--cyan); transform: rotate(.35deg); }
.homeRule > div { padding: 9px 13px; color: white; background: linear-gradient(90deg, #075b70, #168da4); font-size: 13px; font-weight: 900; }
.homeRule > section { display: grid; grid-template-columns: 1fr 2px 1fr; gap: 20px; align-items: stretch; padding: 18px 22px; }
.homeRule p { display: grid; gap: 6px; margin: 0; }
.homeRule p strong { font-size: 14px; }
.homeRule p span { font-size: 15px; }
.homeRule b { color: #006a7c; }
.homeRule i { display: block; background: #99939e; }

/* ÁREA IN-GAME */
.ingamePage .browserWindow,
.guidePage .browserWindow { background: #071524; }

.ingameHero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: 42px;
  align-items: center;
  padding: 48px;
  border-bottom: 3px solid var(--cyan);
  background:
    linear-gradient(rgba(0,230,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,230,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 78% 50%, rgba(201,255,0,.12), transparent 30%),
    #071524;
  background-size: 22px 22px, 22px 22px, auto, auto;
}
.directoryLine,
.guideHeroCopy > p:first-child { margin: 0 0 12px; color: var(--cyan); font-size: 12px; font-weight: 900; letter-spacing: 1px; }
.ingameEyebrow { display: inline-block; padding: 7px 10px; color: #07111e; background: var(--cyan); box-shadow: 4px 4px 0 #5738b7; font-size: 12px; font-weight: 900; }

.ingameHero h1 { margin: 17px 0 18px; color: var(--cyan); font: 400 clamp(44px, 4.62vw, 86px) / 1.065 Anton, Impact, sans-serif; text-shadow: 3px 3px 0 #c824dc; }

/* .ingameHero h1 { margin: 17px 0 18px; color: var(--cyan); font: 900 clamp(40px,5.2vw,70px)/.88 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: 1px; text-shadow: 5px 5px 0 #5738b7; } */

.ingameHero h1 em { color: var(--cyan); font-style: normal; text-shadow: 3px 3px 0 #c824dc; }
.ingameHero > div > p:last-child { max-width: 720px; margin: 0; color: #e3e7f6; font-size: 16px; line-height: 1.55; }
.ingameRule { position: relative; isolation: isolate; padding: 20px; color: #151020; border: 4px outset white; background: #c9c5cd; transform: rotate(1deg); }
.ingameRule::before { content: ''; position: absolute; inset: -4px; transform: translate(9px, 9px); background: var(--card-gradient); z-index: -2; pointer-events: none; }
.ingameRule::after { content: ''; position: absolute; inset: 0; background: #c9c5cd; z-index: -1; pointer-events: none; }
.ingameRule > span { display: block; margin: -20px -20px 18px; padding: 9px 12px; color: white; background: linear-gradient(90deg, #075b70, #168da4); font-size: 12px; font-weight: 900; }
.ingameRule strong { display: block; font-size: 14px; }
.ingameRule p { margin: 5px 0 18px; font-size: 15px; }
.ingameRule p:last-child { margin-bottom: 0; }
.ingameRule b { color: #005e70; }

.ingameCatalog { padding: 34px 31px 40px; background: #0d1d35; }
.ingameCatalogHead { align-items: center; }
.ingameCatalogHead h2 { color: var(--cyan); text-shadow: 5px 5px 0 #5738b7; }
.ingameCount { padding: 8px 10px; color: #07111e !important; background: var(--lime); border: 2px solid white; font-size: 12px !important; font-weight: 900; }
.ingameSearch,
.guideSearch { margin-bottom: 22px; padding: 10px; color: #17121b; border: 3px outset white; background: #c9c5cd; box-shadow: 6px 6px 0 #000; }
.ingameSearch label,
.guideSearch label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 900; }
.ingameSearch > div,
.guideSearch > div { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; color: #161221; background: white; border: 2px inset white; }
.ingameSearch svg,
.guideSearch svg { margin-left: 8px; }
.ingameSearch input,
.guideSearch input { min-width: 0; height: 42px; border: 0; outline: 0; font-size: 16px; }
.ingameSearch button { height: 42px; padding: 0 16px; color: #111; border: 3px outset white; background: var(--cyan); font-size: 13px; font-weight: 900; cursor: pointer; }

.ingameGameGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ingameGameCard { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 280px; color: #17121f; border: 3px outset white; background: #c9c5cd; }
.ingameGameCard.isAvailable::before { content: ''; position: absolute; inset: -3px; transform: translate(7px, 7px); background: var(--card-gradient); z-index: -2; pointer-events: none; }
.ingameGameCard.isAvailable::after { content: ''; position: absolute; inset: 0; background: #c9c5cd; z-index: -1; pointer-events: none; }
.ingameCardStatus { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #e4e1e7; border-bottom: 2px inset white; font-size: 12px; font-weight: 900; }
.ingameCardStatus span:last-child { color: #007b42; }
.ingameGameCard:not(.isAvailable) .ingameCardStatus span:last-child { color: #655b6d; }
.ingameGameBody { display: flex; align-items: center; gap: 16px; flex: 1; padding: 20px 16px; }
.ingameGameBadge,
.guideGameBadge { width: 78px; height: 78px; flex: 0 0 auto; display: grid; place-items: center; color: #07111e; background: #d7ff0b; border: 4px solid #17121f; box-shadow: 6px 6px 0 #17121f; font: 900 25px/.8 Impact, sans-serif; text-align: center; }
.ingameGameBadge { background: #d7ff15; line-height: 1; }
.soonBadge { background: #91899b; }
.ingameGameBody small { color: #4d375f; font-size: 12px; font-weight: 900; }
.ingameGameBody h3 { margin: 6px 0 8px; color: #075b70; font: 900 18px/1.08 "Courier New", monospace; }
.ingameGameBody p { margin: 0; color: #075b70; font-size: 12px; font-weight: 900; line-height: 1.35; text-transform: uppercase; }
.platformTags { display: flex; flex-wrap: wrap; gap: 6px; }
.ingameGameCard .platformTags { padding: 0 16px 16px; }
.platformTags span { padding: 5px 7px; color: #07111e; background: var(--cyan); border: 1px solid currentColor; font-size: 11px; font-weight: 900; }
.guidePage .platformTags span { background: #d7ff0b; }
.openGuide,
.soonGuide { display: block; width: 100%; margin-top: auto; padding: 12px; text-align: center; color: #10101a; border: 3px outset white; background: var(--lime); font: 900 13px/1 "Courier New", monospace; cursor: pointer; }
.soonGuide { background: #aaa5ad; }
.emptyGames { margin: 22px 0 0; padding: 20px; text-align: center; color: var(--pink); border: 2px dashed var(--pink); font-size: 14px; font-weight: 900; }

/* GUIA DE JOGO */
.guideBreadcrumb { display: flex; gap: 10px; padding: 12px 30px; color: #b8c6df; background: #07101f; border-bottom: 1px solid #16475b; font-size: 12px; font-weight: 900; }
.guideBreadcrumb a { color: var(--cyan); }
.guideHero { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(230px, .42fr); gap: 28px; align-items: center; padding: 34px 38px; border-bottom: 3px solid var(--cyan); background: linear-gradient(90deg, rgba(0,230,255,.08), transparent 65%), #09172a; }
.guideGameBadge { width: 118px; height: 118px; font-size: 38px; box-shadow: 8px 8px 0 #4a2a83; }

.guideHeroCopy h1 { margin: 0 0 12px; font: 400 clamp(44px, 4.62vw, 86px) / 1.065 Anton, Impact, sans-serif; text-shadow: 3px 3px 0 #c824dc; }


/* .guideHeroCopy h1 { margin: 0 0 12px; font: 900 clamp(36px,5vw,64px)/.85 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: 1px; text-shadow: 4px 4px 0 #5738b7; } */

.guideHeroCopy h1 em { color: var(--cyan); font-style: normal; }
.guideHeroCopy > p:nth-of-type(2) { max-width: 680px; margin: 0 0 15px; color: #e0e6f3; font-size: 16px; line-height: 1.5; }
.spoilerAlert { padding: 16px; color: #17121f; background: #ffcf3e; border: 4px outset white; box-shadow: 7px 7px 0 #9b2d22; }
.spoilerAlert strong { font-size: 14px; }
.spoilerAlert p { margin: 8px 0 16px; font-size: 13px; line-height: 1.4; }
.spoilerAlert span { display: block; padding-top: 10px; border-top: 2px solid #17121f; font-size: 11px; line-height: 1.5; }

.quickCodes,
.codesDatabase { padding: 30px 32px; background: #0d1d35; }
.codesDatabase { padding-top: 8px; }
.sectionFileHead { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 17px; padding-bottom: 12px; border-bottom: 2px solid #1d536a; }
.sectionFileHead > div > span { color: var(--cyan); font-size: 12px; font-weight: 900; }

.sectionFileHead h2 { margin: 5px 0 0; font: 400 clamp(28px, 4.62vw, 20px) / 1.065 Anton, Impact, sans-serif; text-shadow: 3px 3px 0 #5738b7; }

/* .sectionFileHead h2 { margin: 5px 0 0; font: 900 29px/1 Impact, sans-serif; letter-spacing: 1px; } */

#quick-title,
#database-title { color: #c9ff00; text-shadow: 4px 4px 0 #5738b7; }
.sectionFileHead > span { color: var(--lime); font-size: 12px; font-weight: 900; }
.quickGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quickGrid a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 9px 12px; color: #dce8f5; background: #07111e; border: 1px solid #1d536a; font-size: 12px; font-weight: 900; }
.quickGrid a:hover,
.quickGrid a:focus-visible { color: #07111e; background: var(--cyan); outline: 2px solid white; }
.quickGrid code { color: var(--lime); font: 900 14px/1 "Courier New", monospace; white-space: nowrap; }
.quickGrid a:hover code,
.quickGrid a:focus-visible code { color: #07111e; }

.guideSearch { box-shadow: none; }
.guideSearch > div { grid-template-columns: 32px 1fr; }
.guideFilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 19px; }
.guideFilters button { min-height: 38px; padding: 0 13px; color: #d9e6f2; background: #07111e; border: 2px outset #587083; font-size: 12px; font-weight: 900; cursor: pointer; }
.guideFilters button.isActive { color: #07111e; background: var(--cyan); border-color: white; box-shadow: 3px 3px 0 #5738b7; }
.guideCards { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.codeEntry { scroll-margin-top: 15px; color: #17121f; border: 3px outset white; background: #c9c5cd; }
.codeEntry:target { box-shadow: 0 0 0 3px var(--cyan), 7px 7px 0 #5738b7; }
.entryTop { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; color: white; background: linear-gradient(90deg, #33158a, #b83faf); font-size: 12px; font-weight: 900; }
.entryMain { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #4f4956; border-bottom: 2px inset white; }
.entryMain > div { display: grid; grid-template-columns: 1fr auto; align-items: center; min-width: 0; padding: 12px; color: var(--lime); background: #07111e; }
.entryMain small { grid-column: 1 / -1; margin-bottom: 8px; color: #8bb7c3; font-size: 11px; font-weight: 900; }
.entryMain code { min-width: 0; font: 900 clamp(20px,3vw,29px)/1 "Courier New", monospace; white-space: nowrap; }
.entryMain button { align-self: stretch; min-height: 34px; padding: 0 10px; color: #07111e; background: var(--cyan); border: 2px outset white; font-size: 10px; font-weight: 900; cursor: pointer; }
.entryMain.singleCode { grid-template-columns: 1fr; }
.codeEntry > h3 { margin: 0; padding: 14px 14px 12px; font: 900 20px/1.1 "Courier New", monospace; }
.entryDetails { display: grid; grid-template-columns: 1fr 1fr; margin: 0 14px 14px; border: 1px solid #8b8590; }
.entryDetails > div { min-width: 0; padding: 10px; border: 1px solid #aaa5ae; }
.entryDetails dt { margin-bottom: 5px; color: #075b70; font-size: 11px; font-weight: 900; }
.entryDetails dd { margin: 0; font-size: 13px; line-height: 1.45; }
.codeEntry footer { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; color: #d7e3ed; background: #07111e; font-size: 11px; font-weight: 900; }
.codeEntry footer a { color: var(--cyan); }
.randomEntry .entryMain > div { color: #ffcf3e; }
.guideNote { margin: 0; padding: 22px 32px; color: #06121f; background: var(--lime); border-block: 3px solid white; }
.guideNote strong { font-size: 13px; }
.guideNote p { margin: 7px 0 0; font-size: 14px; line-height: 1.45; }

/* RODAPÉ INSTITUCIONAL E REDES SOCIAIS */
.siteFooter { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(260px,1fr) minmax(370px,1.35fr); gap: 24px; align-items: center; padding: 24px 30px; color: #dfe7f4; background: #07101f; border-top: 3px solid var(--cyan); }
.footerBrand { display: grid; gap: 5px; }
.footerBrand strong { color: var(--lime); font-size: 16px; }
.footerBrand span { color: white; font-size: 11px; font-weight: 900; line-height: 1.4; }
.footerEmail { color: var(--cyan); font-size: 13px; font-weight: 900; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
.legalPage .footerEmail { font-size: 11.83px; }
.footerNav { display: flex; flex-wrap: wrap; gap: 9px 15px; }
.footerNav a { color: var(--cyan); font-size: 13px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.socialLinks { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.socialLinks a { display: grid; grid-template-columns: 31px 1fr; align-items: center; gap: 7px; min-width: 0; padding: 6px; color: #17121f; background: #c9c5cd; border: 2px outset white; font-size: 13px; font-weight: 900; }
.socialLinks b { width: 31px; height: 31px; display: grid; place-items: center; color: #07111e; background: var(--lime); border: 2px solid #17121f; font-size: 10px; }
.socialLinks span { overflow: hidden; text-overflow: ellipsis; }
.footerNav a:focus-visible,
.socialLinks a:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* AVISO DE COOKIES */
.cookieBanner[hidden] { display: none; }
.cookieBanner { position: fixed; left: 50%; bottom: 18px; z-index: 50; width: min(980px,calc(100% - 28px)); max-height: calc(100vh - 36px); display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; padding: 17px; overflow-y: auto; color: #17121f; background: #c9c5cd; border: 4px outset white; box-shadow: 9px 9px 0 #b83faf; transform: translateX(-50%); font-family: "Courier New",ui-monospace,monospace; }
.cookieBanner strong { display: block; margin-bottom: 7px; color: #391690; font-size: 13px; }
.cookieBanner p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.cookieBanner a { color: #075b70; font-size: 11px; font-weight: 900; text-decoration: underline; }
.cookieBanner > div:last-child { display: flex; gap: 8px; }
.cookieBanner button { min-height: 40px; padding: 0 13px; color: #111; border: 3px outset white; background: #aaa5ad; font-size: 11px; font-weight: 900; cursor: pointer; }
.cookieBanner button[data-cookie-accept] { background: var(--lime); }

/* PÁGINAS INSTITUCIONAIS E LEGAIS */
.legalPage .browserWindow { background: #071524; }
.legalHero { padding: 42px 38px 34px; border-bottom: 3px solid var(--cyan); background: linear-gradient(rgba(0,230,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,230,255,.07) 1px,transparent 1px),#071524; background-size: 22px 22px; }
.legalHero > span { color: var(--cyan); font-size: 12px; font-weight: 900; letter-spacing: 1px; }

.legalHero h1 { margin: 12px 0 14px; color: var(--lime); font: 400 clamp(44px, 4.62vw, 86px) / 1.065 Anton, Impact, sans-serif; text-shadow: 3px 3px 0 #c824dc; }

/* .legalHero h1 { margin: 12px 0 14px; color: var(--lime); font: 900 clamp(38px,5vw,66px)/.9 Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; letter-spacing: 1px; text-shadow: 5px 5px 0 #5738b7; } */

.legalHero h1 em { color: var(--lime); font-style: normal; }
.legalHero h1.aboutTitle { color: var(--lime); }
.legalHero h1.contactTitle { color: var(--lime); }
.legalHero p { max-width: 790px; margin: 0; color: #dce5f2; font-size: 16px; line-height: 1.6; }
.legalContent { display: grid; gap: 18px; padding: 30px 38px 42px; background: #0d1d35; }
.legalSection { padding: 24px; color: #17121f; background: #c9c5cd; border: 3px outset white; box-shadow: 6px 6px 0 #07111e; }
.legalSection h2 { margin: 0 0 13px; color: #391690; font: 900 25px/1 Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; letter-spacing: 1px; }
.legalSection h3 { margin: 20px 0 8px; color: #075b70; font-size: 16px; }
.legalSection p,
.legalSection li,
.legalSection dd { font-size: 16px; line-height: 1.65; }
.legalSection p:last-child { margin-bottom: 0; }
.legalSection a { color: #4d126e; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.legalSection ul { display: grid; gap: 8px; padding-left: 24px; }
.legalSection dl { display: grid; gap: 12px; margin: 0; }
.legalSection dt { color: #075b70; font-size: 13px; font-weight: 900; }
.legalSection dd { margin: 3px 0 0; }
.legalGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.legalNotice { padding: 18px; color: #17121f; background: #ffcf3e; border: 3px outset white; font-size: 15px; font-weight: 900; line-height: 1.55; }
.tableWrap { overflow-x: auto; }
.privacyTable { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.privacyTable th,
.privacyTable td { padding: 11px; border: 2px solid #8e8992; text-align: left; vertical-align: top; }
.privacyTable th { color: white; background: #391690; }
.contactCards { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.contactCard { display: grid; grid-template-columns: 54px 1fr; gap: 13px; align-items: center; padding: 14px; color: #17121f !important; background: #e3e0e5; border: 3px outset white; text-decoration: none !important; }
.contactCardEmail { grid-column: 1 / -1; }
.contactCard b { width: 54px; height: 54px; display: grid; place-items: center; background: var(--lime); border: 3px solid #17121f; }
.contactCard span { display: grid; gap: 4px; }
.contactCard small { color: #5b4b6d; font-size: 11px; }
.contactCard strong { color: #391690; font-size: 14px; overflow-wrap: anywhere; }
.legalButton { display: inline-block; min-height: 42px; padding: 11px 15px; color: #07111e !important; background: var(--lime); border: 3px outset white; font: 900 12px/1.3 "Courier New",monospace; text-decoration: none !important; cursor: pointer; }

@media (max-width: 850px) {
  .page { padding: 0 0 30px; }
  .browserWindow { border-inline: 0; }
  .header { padding: 16px; flex-wrap: wrap; }
  .counter { margin-left: auto; }
  .logo strong { font-size: 21px; }
  .logo small { letter-spacing: 1px; }
  .hero { grid-template-columns: 1fr; gap: 36px; padding: 35px 20px; }
  .hero h1 { font-size: 45px; }
  .featured { max-width: 390px; width: 100%; margin: auto; }
  .gameGrid { grid-template-columns: 1fr 1fr; }
  .catalog { padding: 25px 16px; }
  .siteFooter { grid-template-columns: 1fr; }
  .socialLinks { max-width: 600px; }
}

@media (max-width: 520px) {
  .logo { align-items: flex-start; }
  .logo small { max-width: 210px; line-height: 1.4; }
  .gameGrid { grid-template-columns: 1fr; }
  .searchBox > div { grid-template-columns: 24px 1fr; }
  .searchBox button { grid-column: 1 / -1; }
  .statusbar span:nth-child(2) { display: none; }
  .statusbar { grid-template-columns: 1fr 1fr; }
  .codesContent { padding: 18px; }
  .codesActions { grid-template-columns: 1fr; }
  .socialLinks { grid-template-columns: 1fr 1fr; }
  .cookieBanner { bottom: 8px; grid-template-columns: 1fr; gap: 12px; max-height: calc(100vh - 16px); overflow-y: auto; }
  .cookieBanner > div:last-child { display: grid; grid-template-columns: 1fr; }
  .cookieBanner button { width: 100%; }
}

@media (max-width: 980px) {
  .ingameHero { grid-template-columns: 1fr; }
  .ingameRule { max-width: 560px; transform: none; }
  .ingameGameGrid { grid-template-columns: 1fr 1fr; }
  .guideHero { grid-template-columns: auto 1fr; }
  .spoilerAlert { grid-column: 1 / -1; }
  .guideCards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .choiceScreen { padding: 28px 17px 34px; }
  .choiceIntro { grid-template-columns: 1fr; align-items: start; }
  .choiceIntro > span { margin-bottom: -10px; }
  .choiceGrid { grid-template-columns: 1fr; }
  .choiceCard { min-height: 360px; }
  .homeRule { transform: none; }
  .homeRule > section { grid-template-columns: 1fr; gap: 15px; }
  .homeRule i { height: 2px; }
}

@media (max-width: 650px) {
  .ingameHero { padding: 34px 18px; }
  .ingameHero h1 { font-size: 42px; }
  .ingameCatalog { padding: 28px 15px 32px; }
  .ingameCatalogHead { align-items: flex-start; gap: 13px; }
  .ingameCount { white-space: nowrap; }
  .ingameSearch > div { grid-template-columns: 30px 1fr; }
  .ingameSearch button { grid-column: 1 / -1; }
  .ingameGameGrid { grid-template-columns: 1fr; }
  .guideBreadcrumb { padding-inline: 17px; overflow: hidden; }
  .guideHero { grid-template-columns: 1fr; padding: 28px 18px; }
  .guideGameBadge { width: 88px; height: 88px; font-size: 29px; }
  .spoilerAlert { grid-column: auto; }
  .quickCodes,
  .codesDatabase { padding-inline: 15px; }
  .quickGrid { grid-template-columns: 1fr; }
  .sectionFileHead { align-items: flex-start; }
  .sectionFileHead > span { text-align: right; }
  .entryMain { grid-template-columns: 1fr; }
  .entryDetails { grid-template-columns: 1fr; }
  .guideNote { padding-inline: 18px; }
  .legalHero { padding: 32px 18px 28px; }
  .legalContent { padding: 24px 15px 34px; }
  .legalSection { padding: 19px; }
  .legalGrid,
  .contactCards { grid-template-columns: 1fr; }
}

/* v19: acomodar soluções textuais nos novos guias */
.expandedGuide .quickGrid a { flex-wrap: wrap; min-width: 0; }
.expandedGuide .quickGrid code { white-space: normal; line-height: 1.35; overflow-wrap: anywhere; }
.expandedGuide .entryMain { grid-template-columns: 1fr; }
.expandedGuide .entryMain > div { gap: 8px; }
.expandedGuide .entryMain code { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.expandedGuide .entryTop, .expandedGuide .codeEntry footer { flex-wrap: wrap; }
.expandedGuide .codeEntry, .expandedGuide .guideHeroCopy { min-width: 0; }
.expandedGuide .guideBreadcrumb { flex-wrap: wrap; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .expandedGuide .entryMain > div { grid-template-columns: 1fr; }
  .expandedGuide .entryMain button { justify-self: start; }
}

.ingameGameCard[hidden], .codeEntry[hidden] { display: none; }

/* V23: uma única área de conteúdo, preservando o card original. */
.homePage .choiceGrid { grid-template-columns: minmax(0, 550px); justify-content: center; }
.homePage .homeRule { max-width: 550px; }
.homePage .homeRule > section { grid-template-columns: minmax(0, 1fr); }


/* Ajustes responsivos */
/* Correções de largura: o conteúdo encolhe dentro da tela, sem ser cortado. */
.browserWindow, .legalContent, .legalSection, .legalGrid, .tableWrap,
.guideHeroCopy, .ingameGameCard, .ingameGameBody > div,
.quickGrid > *, .guideCards > *, .sectionFileHead > *, .catalogHead > * {
  min-width: 0;
}
.legalContent { grid-template-columns: minmax(0, 1fr); }
.legalSection, .legalHero, .guideHeroCopy, .ingameGameBody,
.guideNote, .codeEntry, .sectionFileHead, .ingameCatalogHead {
  overflow-wrap: anywhere;
}
.tableWrap { max-width: 100%; }
.legalSection h2 { line-height: 1.18; }
.guideBreadcrumb, .sectionFileHead, .ingameCatalogHead { flex-wrap: wrap; }
.guideBreadcrumb { overflow: visible; overflow-wrap: anywhere; }
.entryMain code { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.quickGrid a { min-width: 0; flex-wrap: wrap; }
.quickGrid code { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.entryTop, .codeEntry footer { flex-wrap: wrap; }
.newGuide .entryDetails dd { font-size: 16px; line-height: 1.55; }
.newGuide .guideFilters button, .newGuide .quickGrid a { font-size: 14px; }
.newGuide .guideHeroCopy h1 { line-height: 1; }
.newGuide .guideIntro { margin: 0; padding: 22px 32px; background: #0d1d35; line-height: 1.6; }
.newGuide .guideIntro h2 { color: var(--cyan); font-size: 22px; }
.newGuide .guideIntro p, .newGuide .guideIntro li { font-size: 16px; }
.newGuide .guideIntro a { color: var(--cyan); text-decoration: underline; }
.newGuide .entryMain small { line-height: 1.5; }
.newGuide .entryMain code { text-transform: none; }
.newGuide .entryDetails > div:last-child { grid-column: 1 / -1; }
.newGuide details.guideOverview > summary { cursor: pointer; color: var(--lime); padding: 12px 0; font-weight: bold; }
.newGuide .methodLabel { color: #ffcf3e; }
@media (max-width: 650px) {
  .legalSection { padding: 16px; }
  .legalHero h1 { font-size: clamp(28px, 8vw, 48px); line-height: 1; }
  .legalSection h2 { font-size: clamp(20px, 5.5vw, 25px); }
  /* Empilha cada registro com seu cabeçalho para dispensar rolagem lateral. */
  .privacyTable { min-width: 0; width: 100%; }
  .privacyTable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .privacyTable tbody, .privacyTable tr, .privacyTable td { display: block; width: 100%; }
  .privacyTable tr { margin-bottom: 14px; border: 2px solid #8b8590; }
  .privacyTable td { border: 0; border-bottom: 1px solid #aaa5ae; overflow-wrap: anywhere; }
  .privacyTable td::before { content: attr(data-label); display: block; color: #391690; font-weight: bold; margin-bottom: 4px; }
  .ingameCount { white-space: normal; }
  .ingameHero h1 { font-size: clamp(30px, 8.5vw, 42px); overflow-wrap: anywhere; }
  .titlebar { height: auto; min-height: 31px; gap: 8px; }
  .titlebar > span { min-width: 0; overflow-wrap: anywhere; }
  .titlebar > div { flex-shrink: 0; }
  .newGuide .guideIntro { padding: 18px 15px; }
}
@media (max-width: 380px) {
  .ingameGameBody { gap: 12px; padding-inline: 12px; }
  .ingameGameBadge { width: 60px; height: 64px; font-size: 23px; }
  .entryMain > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .entryMain button { justify-self: start; }
}


/* Homepage */
/* Homepage restaurada conforme a referência Princ; estilos isolados do catálogo. */
@font-face {
  font-family: Anton;
  src: url('assets/anton.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Pixelify;
  src: url('assets/pixelify-sans.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}

.homeRestored {
  --home-unit: min(.054171vw, .093458svh);
  --card-gradient: linear-gradient(90deg, #075b70, #168da4);
  --bar-gradient: linear-gradient(90deg, #33158a, #b83faf);
  color: #e7e4e8;
  background-color: #001923;
  background-image:
    linear-gradient(#06404e66 1px, transparent 1px),
    linear-gradient(90deg, #06404e66 1px, transparent 1px),
    radial-gradient(ellipse at 25% 50%, #00323c, transparent 55%);
  background-size: calc(28 * var(--home-unit)) calc(28 * var(--home-unit)), calc(28 * var(--home-unit)) calc(28 * var(--home-unit)), auto;
  font: 700 calc(15 * var(--home-unit))/1.2 'Lucida Console', 'DejaVu Sans Mono', monospace;
}
.homeRestored [hidden] { display: none !important; }
.homeRestored .homeShell {
  width: 100%;
  max-width: none;
  height: 100svh;
  min-height: calc(1070 * var(--home-unit));
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.homeRestored .homeMasthead,
.homeRestored .homeStage {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}
.homeRestored .homeMasthead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 50%;
  align-items: center;
  gap: calc(30 * var(--home-unit));
  padding: calc(32 * var(--home-unit)) 2.6% calc(38 * var(--home-unit));
}
.homeRestored .homeCategories {
  margin: 0 0 calc(26 * var(--home-unit));
  color: #00cde0;
  font-size: calc(14 * var(--home-unit));
  white-space: nowrap;
}
.homeRestored .homeLogo {
  display: flex;
  align-items: center;
  gap: calc(30 * var(--home-unit));
  white-space: nowrap;
  color: #d2ff14;
  font: 400 calc(59 * var(--home-unit))/1 Anton, Impact, sans-serif;
  text-shadow: calc(3 * var(--home-unit)) calc(3 * var(--home-unit)) #c824dc;
}
.homeRestored .gtBadge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: calc(90 * var(--home-unit));
  height: calc(90 * var(--home-unit));
  border: calc(7 * var(--home-unit)) solid #fff;
  background: #d4ff0e;
  color: #000;
  box-shadow: calc(8 * var(--home-unit)) calc(8 * var(--home-unit)) #e22cd8;
  transform: rotate(-7deg);
  font: 700 calc(42 * var(--home-unit))/1 'Courier New', monospace;
  text-shadow: none;
}
.homeRestored .homeMasthead h1 {
  min-width: 0;
  margin: 0;
  color: #d7ff0b;
  font: 400 calc(66 * var(--home-unit))/1.04 Anton, Impact, sans-serif;
  text-align: center;
  letter-spacing: calc(.1 * var(--home-unit));
  text-shadow: calc(3 * var(--home-unit)) calc(3 * var(--home-unit)) #ac28df;
}
.homeRestored .homeLanguages {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(16 * var(--home-unit));
  padding-top: calc(18 * var(--home-unit));
}
.homeRestored .languageBubble {
  display: block;
  flex: 0 0 auto;
  width: clamp(52px, 3.3vw, 64px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.homeRestored .languageBubble svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 48 / 40;
  fill: none;
  stroke: none;
  stroke-width: 0;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.homeRestored .bubbleShadow { fill: #006a7d; }
.homeRestored .bubbleOutline { fill: #00ccdf; }
.homeRestored .isCurrent .bubbleOutline { fill: #ffffe7; }
.homeRestored .languageBubble:hover { transform: translateY(calc(-2 * var(--home-unit))); }

.homeRestored .homeStage {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 2.5%;
  padding: calc(12 * var(--home-unit)) 3.5% calc(36 * var(--home-unit));
}
.homeRestored .sideArt {
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-self: stretch;
}
.homeRestored .sideArt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.homeRestored .homeCard {
  min-width: 0;
  position: relative;
  isolation: isolate;
  align-self: center;
  border: calc(4 * var(--home-unit)) outset #f4f2ef;
  color: #202b30;
  background: #c9c5cd;
}
.homeRestored .homeCard::before {
  content: '';
  position: absolute;
  inset: calc(-4 * var(--home-unit));
  transform: translate(calc(13 * var(--home-unit)), calc(13 * var(--home-unit)));
  background: var(--card-gradient);
  z-index: -2;
  pointer-events: none;
}
.homeRestored .homeCard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #c9c5cd;
  z-index: -1;
  pointer-events: none;
}
.homeRestored .homeCardTop {
  display: flex;
  justify-content: space-between;
  gap: calc(12 * var(--home-unit));
  padding: calc(12 * var(--home-unit)) calc(14 * var(--home-unit));
  background: var(--bar-gradient);
  color: #f4eff8;
  font-size: calc(15 * var(--home-unit));
}
.homeRestored .homeCardTop span:last-child { color: #d5ff17; white-space: nowrap; }
.homeRestored .homeCardBody {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: calc(24 * var(--home-unit));
  padding: calc(30 * var(--home-unit)) calc(30 * var(--home-unit)) 0;
}
.homeRestored .homeCardCopy { min-width: 0; }
.homeRestored .terminalIcon {
  width: calc(82 * var(--home-unit));
  height: calc(82 * var(--home-unit));
  margin-bottom: calc(25 * var(--home-unit));
  display: grid;
  place-items: center;
  background: #d7ff15;
  border: calc(4 * var(--home-unit)) solid #0a1310;
  box-shadow: calc(6 * var(--home-unit)) calc(6 * var(--home-unit)) #17211d;
  color: #070b05;
  font: 700 calc(42 * var(--home-unit))/1 monospace;
}
.homeRestored .homeCardType {
  margin: 0 0 calc(10 * var(--home-unit));
  font-size: calc(14 * var(--home-unit));
  white-space: nowrap;
  letter-spacing: calc(-.45 * var(--home-unit));
}
.homeRestored .homeCard h2 {
  margin: 0 0 calc(22 * var(--home-unit));
  color: #075b70;
  background: var(--card-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font: 400 calc(66 * var(--home-unit))/.9 Anton, Impact, sans-serif;
  letter-spacing: calc(1 * var(--home-unit));
  transform: scaleX(1.14);
  transform-origin: left center;
}
.homeRestored .homeCardCopy ul {
  display: grid;
  gap: calc(8 * var(--home-unit));
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: calc(15 * var(--home-unit));
}
.homeRestored .homeCardCopy li::before {
  content: '';
  display: inline-block;
  width: calc(9 * var(--home-unit));
  height: calc(9 * var(--home-unit));
  margin-right: calc(10 * var(--home-unit));
  background: var(--card-gradient);
}
.homeRestored .homeSearch { min-width: 0; margin-top: calc(14 * var(--home-unit)); }
.homeRestored .homeSearch label {
  display: block;
  margin-bottom: calc(38 * var(--home-unit));
  color: #075b70;
  font-size: calc(20 * var(--home-unit));
  line-height: 1.2;
  text-align: center;
}
.homeRestored .homeSearchField { position: relative; }
.homeRestored .homeSearch input {
  width: 100%;
  min-width: 0;
  height: calc(58 * var(--home-unit));
  padding: calc(15 * var(--home-unit)) calc(12 * var(--home-unit));
  border: calc(3 * var(--home-unit)) double #075b70;
  border-radius: 0;
  background: #eefbff;
  color: #075b70;
  font: 400 calc(16 * var(--home-unit))/1.4 'Lucida Console', 'DejaVu Sans Mono', monospace;
  box-shadow: calc(2 * var(--home-unit)) calc(2 * var(--home-unit)) #e8f7fc, calc(-2 * var(--home-unit)) calc(-2 * var(--home-unit)) #e8f7fc;
}
.homeRestored .homeSearch input::placeholder { color: #355d69; opacity: 1; }
.homeRestored .homeSearchButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(22 * var(--home-unit));
  width: 100%;
  height: calc(58 * var(--home-unit));
  margin-top: calc(26 * var(--home-unit));
  padding: calc(10 * var(--home-unit));
  color: #07111e;
  border: calc(2 * var(--home-unit)) solid #075b70;
  border-radius: 0;
  background: var(--card-gradient);
  font: 700 calc(24 * var(--home-unit))/1 'Lucida Console', 'DejaVu Sans Mono', monospace;
  box-shadow: calc(2 * var(--home-unit)) calc(2 * var(--home-unit)) #075b70;
  cursor: pointer;
}
.homeRestored .homeSearchButton svg { width: calc(27 * var(--home-unit)); height: calc(27 * var(--home-unit)); fill: currentColor; stroke: none; }
.homeRestored .homeSearchButton:hover { background: linear-gradient(90deg, #0a6c82, #209caf); }
.homeRestored .homeSearchStatus { margin: calc(12 * var(--home-unit)) 0 0; color: #075b70; font-size: calc(13 * var(--home-unit)); line-height: 1.35; }
.homeRestored .homeSearchStatus:empty { display: none; }
.homeRestored .homeSuggestions {
  position: relative;
  z-index: 30;
  max-height: calc(260 * var(--home-unit));
  overflow-y: auto;
  margin: calc(8 * var(--home-unit)) 0 0;
  padding: calc(4 * var(--home-unit));
  list-style: none;
  background: #eefbff;
  border: calc(2 * var(--home-unit)) solid #075b70;
  box-shadow: calc(4 * var(--home-unit)) calc(4 * var(--home-unit)) #075b7040;
}
.homeRestored .homeSuggestions li { padding: calc(12 * var(--home-unit)) calc(9 * var(--home-unit)); cursor: pointer; color: #075b70; border-bottom: 1px solid #bbdce8; font-size: calc(15 * var(--home-unit)); line-height: 1.35; }
.homeRestored .homeSuggestions li:last-child { border-bottom: 0; }
.homeRestored .homeSuggestions li:hover,
.homeRestored .homeSuggestions li[aria-selected='true'] { background: #9eeef7; color: #07111e; }
.homeRestored .homeShell:has(.homeSuggestions:not([hidden])),
.homeRestored .homeShell:has(.homeSearchStatus:not(:empty)) { height: auto; min-height: 100svh; }
.homeRestored .homeStage:has(.homeSuggestions:not([hidden])),
.homeRestored .homeStage:has(.homeSearchStatus:not(:empty)) { min-height: calc(650 * var(--home-unit)); }
.homeRestored .homeAccess {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--home-unit));
  min-height: calc(58 * var(--home-unit));
  margin: calc(32 * var(--home-unit)) calc(30 * var(--home-unit)) calc(30 * var(--home-unit));
  padding: calc(14 * var(--home-unit)) calc(16 * var(--home-unit));
  border: calc(3 * var(--home-unit)) outset #f9ffe5;
  color: #19290d;
  background: #d8ff26;
  font-size: calc(15 * var(--home-unit));
}
.homeRestored .homeAccess span { flex-shrink: 0; font-size: calc(27 * var(--home-unit)); line-height: 1; }
.homeRestored .homeAccess:hover { background: #e3ff61; }

.homeRestored :is(a, button, input):focus-visible { outline: 3px solid #00cbdc; outline-offset: 5px; }
.homeRestored .skipLink { position: absolute; left: 20px; top: -100px; z-index: 100; background: #d4ff15; color: #002932; padding: 15px; font-size: 16px; }
.homeRestored .skipLink:focus { top: 10px; }

/* Telas baixas podem rolar, sem cortar a busca nem o rodapé. */
@media (min-width: 951px) and (max-height: 600px) {
  .homeRestored { --home-unit: min(.054171vw, 1px); }
  .homeRestored .homeShell { height: auto; }
  .homeRestored .homeStage { min-height: calc(665 * var(--home-unit)); }
}
@media (max-width: 950px) {
  .homeRestored { --home-unit: 1px; }
  .homeRestored .homeShell { display: flex; flex-direction: column; max-width: none; height: auto; min-height: 100svh; }
  .homeRestored .homeMasthead { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 20px 34px; }
  .homeRestored .brandGroup { text-align: center; }
  .homeRestored .homeCategories { font-size: 12px; margin-bottom: 20px; }
  .homeRestored .homeLogo { justify-content: center; gap: 20px; font-size: 40px; }
  .homeRestored .gtBadge { width: 72px; height: 72px; font-size: 34px; }
  .homeRestored .homeLanguages { padding: 0; gap: 16px; }
  .homeRestored .languageBubble { width: 56px; }
  .homeRestored .homeMasthead h1 { font-size: clamp(29px, 5.5vw, 48px); }
  .homeRestored .homeStage { grid-template-columns: minmax(0, 1fr); padding: 12px 6% 46px; }
  .homeRestored .sideArt { display: none; }
  .homeRestored .homeCard { width: 100%; max-width: 710px; justify-self: center; }
  .homeRestored .homeCardType { white-space: normal; }
}
@media (max-width: 580px) {
  .homeRestored .homeLogo { font-size: clamp(24px, 8vw, 36px); gap: 14px; }
  .homeRestored .gtBadge { width: 56px; height: 56px; border-width: 5px; font-size: 28px; }
  .homeRestored .homeCategories { font-size: 10px; }
  .homeRestored .homeMasthead h1 { font-size: clamp(25px, 6.2vw, 36px); }
  .homeRestored .homeStage { padding-inline: 18px; }
  .homeRestored .homeCardBody { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 24px 22px 0; }
  .homeRestored .terminalIcon { width: 60px; height: 60px; font-size: 30px; margin-bottom: 22px; }
  .homeRestored .homeCardType { font-size: 11px; }
  .homeRestored .homeCard h2 { font-size: 54px; }
  .homeRestored .homeCardCopy ul { font-size: 12px; }
  .homeRestored .homeSearch { margin: 0; }
  .homeRestored .homeSearch label { font-size: 20px; margin-bottom: 18px; }
  .homeRestored .homeSearchButton { font-size: 24px; margin-top: 18px; }
  .homeRestored .homeSearchStatus { font-size: 13px; }
  .homeRestored .homeSuggestions { max-height: 220px; }
  .homeRestored .homeAccess { margin: 24px 22px; font-size: 13px; line-height: 1.4; }
  .homeRestored .homeCardTop { font-size: 12px; }
  .homeRestored .homeCard::before { transform: translate(8px, 8px); }
}


/* Textura e rodape comuns */
/* Acabamento comum: a textura e o rodapé seguem o catálogo de jogos. */
:root {
  --gt-scanline-pattern: repeating-linear-gradient(0deg, transparent 0 3px, #000 4px);
  --gt-scanline-opacity: .11;
}

/* As páginas internas já têm uma única camada de textura sobre a tela. */
.scanlines {
  background: var(--gt-scanline-pattern);
  opacity: var(--gt-scanline-opacity);
}

/* Na principal, aplique a mesma textura somente ao card e ao rodapé.
   O espaçamento fica em pixels CSS, sem acompanhar a escala do layout. */
.homeRestored .homeCardTexture,
.homeRestored .siteFooter::after,
.homeRestored .statusbar::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--gt-scanline-pattern);
  opacity: var(--gt-scanline-opacity);
  pointer-events: none;
}

.homeRestored .siteFooter,
.homeRestored .statusbar {
  position: relative;
  isolation: isolate;
}

.homeRestored .siteFooter::after,
.homeRestored .statusbar::after {
  content: '';
}

/* Layout, cores, bordas e botões usam as regras .siteFooter de styles.css.
   Fixe a tipografia para não herdar a fonte escalada da página principal. */
.siteFooter,
.statusbar {
  font-family: "Courier New", ui-monospace, monospace;
  line-height: normal;
}

.siteFooter {
  font-size: 16px;
  font-weight: 400;
}

.siteFooter > * {
  min-width: 0;
}

.siteFooter .footerEmail {
  font-size: 13px;
}

.statusbar {
  font-size: 11px;
  font-weight: 900;
}

.siteFooter a:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

@media (max-width: 950px) {
  .siteFooter {
    grid-template-columns: minmax(0, 1fr);
  }

  .siteFooter .socialLinks {
    max-width: 600px;
  }
}


/* Catalogo em largura total e gradiente dos cards */
/* Catálogo em largura total e barras com o mesmo gradiente do card da index. */
.ingamePage {
  --ingame-titlebar-gradient: linear-gradient(90deg, #33158a, #b83faf);
}

.ingamePage .page {
  padding: 0;
  background: #071524;
}

.ingamePage .browserWindow {
  width: 100%;
  max-width: none;
  margin: 0;
  box-shadow: none;
}

.ingamePage .ingameRule > span,
.ingamePage .ingameCardStatus {
  color: #fff;
  background: var(--ingame-titlebar-gradient);
}

.ingamePage .ingameCardStatus span:last-child {
  color: #d5ff17;
}


/* Cabeçalhos unificados — 14/09/2026.
   Balões e acabamento copiados da página principal deste pacote. */
.header.headerWithLanguages {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
}
.headerWithLanguages .logo { min-width: 0; align-items: center; }
.headerWithLanguages .logoOrb { flex-shrink: 0; }
.headerWithLanguages .logo > span:last-child { min-width: 0; }
.headerWithLanguages .logo small { white-space: nowrap; max-width: none; }
.homeLanguages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  justify-self: center;
  gap: 14px;
  width: 100%;
  max-width: 840px;
  min-width: 0;
  padding: 0 5px 12px 0;
}
.languageWindow {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
  padding: 0;
  color: #17121f;
  background: #c9c5cd;
  border: 2px outset #f4f2ef;
  border-radius: 0;
  filter: drop-shadow(5px 5px 0 #168da4);
  font-family: "Courier New", ui-monospace, monospace;
  text-align: left;
  cursor: pointer;
}
.languageWindow::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 4px;
  width: 14px;
  height: 12px;
  background: linear-gradient(90deg, #f4f2ef 2px, #c9c5cd 2px);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.languageCode {
  display: block;
  padding: 3px 6px;
  color: #fff;
  background: linear-gradient(90deg, #33158a, #b83faf);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}
.languageName {
  display: block;
  padding: 10px 4px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
.languageWindow:lang(zh-Hans) .languageName {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}
.languageWindow:hover .languageName { background: #e2dfe6; }
.languageWindow:active { border-style: inset; }


@media (max-width: 850px) {
  .header.headerWithLanguages { gap: 22px; padding: 16px; }
  .headerWithLanguages .logo strong { font-size: 21px; }
  .headerWithLanguages .logo small { font-size: 12px; letter-spacing: 1px; }
}
@media (max-width: 380px) {
  .header.headerWithLanguages { padding-inline: 12px; }
  .headerWithLanguages .logo small { font-size: 11px; }
}
@media (max-width: 1280px) {
  .header.headerWithLanguages { grid-template-columns: minmax(0, 1fr) auto; gap: 22px 24px; }
  .headerWithLanguages .counter { grid-column: 2; grid-row: 1; }
  .homeLanguages { grid-column: 1 / -1; grid-row: 2; max-width: none; }
}
@media (max-width: 600px) {
  .headerWithLanguages .logo { grid-column: 1 / -1; }
  .headerWithLanguages .logo small { white-space: normal; line-height: 1.5; }
  .headerWithLanguages .counter { grid-column: 1 / -1; grid-row: 3; justify-self: end; }
  .homeLanguages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .homeLanguages .languageWindow:last-child { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; }
}

/* Janela em tela cheia nas páginas internas, igual à página inicial */
.legalPage .page { min-height: 100svh; padding: 0; background: #071524; overflow: visible; }
.legalPage .browserWindow { display: flex; flex-direction: column; width: 100%; max-width: none;
  min-height: 100vh; min-height: 100svh; margin: 0; box-shadow: none; }
.legalPage .browserWindow > * { flex-shrink: 0; }
.legalPage .legalContent { flex: 1 0 auto; align-content: start; } /* mantém o rodapé no fim em páginas curtas, sem esticar os cards */

/* Guias: ocupar toda a janela e igualar a entrelinha dos emblemas ao catálogo. */
.guidePage .page {
  padding: 0;
  background: #071524;
}
.guidePage .browserWindow {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  box-shadow: none;
}
.guidePage .guideGameBadge {
  line-height: 1;
}

/* Espaco explicito entre as linhas dos emblemas. */
.guidePage .guideGameBadge { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .16em; line-height: 1; }
.guidePage .guideGameBadge > span { display: block; flex: 0 0 auto; line-height: 1; }

/* Foco visível nas buscas do catálogo e dos guias. */
.ingameSearch input:focus-visible,
.guideSearch input:focus-visible { outline: 3px solid #007b8d; outline-offset: -3px; }

/* Títulos dos guias: quebra natural no desktop e ícone ao lado no mobile. */
@media (min-width: 1101px) {
  .guideHeroCopy h1 > br { display: none; }
  .guideHeroCopy h1 > br + em::before { content: " "; }
}
@media (max-width: 650px) {
  .guidePage .guideHero {
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 20px;
  }
  .guidePage .guideHeroCopy { display: contents; }
  .guidePage .guideHeroCopy > p:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
  }
  .guidePage .guideHero > .guideGameBadge {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
  }
  .guidePage .guideHeroCopy > h1 {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }
  .guidePage .guideHeroCopy > p:not(:first-child),
  .guidePage .guideHeroCopy > .platformTags,
  .guidePage .guideHero > .spoilerAlert { grid-column: 1 / -1; }
  .guidePage .guideHeroCopy > p:nth-of-type(2) { margin: 0; }
}

/* Catálogo compacto exclusivamente em celulares. */
@media (max-width: 600px) {
  .ingameGameCard { min-height: 0; }
  .ingameGameCard .ingameGameBody { flex: 0 0 auto; padding-block: 14px; }
  .ingameGameCard .platformTags { padding-bottom: 12px; }
  #the-last-of-us-part-i .ingameGameBadge,
  #the-last-of-us-part-ii .ingameGameBadge { position: relative; font-size: 0; }
  #the-last-of-us-part-i .ingameGameBadge br,
  #the-last-of-us-part-ii .ingameGameBadge br { display: none; }
  #the-last-of-us-part-i .ingameGameBadge::after { content: "TL1"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 23px; }
  #the-last-of-us-part-ii .ingameGameBadge::after { content: "TL2"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 23px; }
}

/* Permite aproveitar a linha ao lado do emblema, somente no mobile. */
@media (max-width: 650px) {
  .guideHeroCopy h1 > br { display: none; }
  .guideHeroCopy h1 > br + em::before { content: " "; }
}