:root {
  --font-display: 'Press Start 2P', monospace;
  --font-mono: 'Press Start 2P', monospace;
  --font-body: 'VT323', monospace;
  --cyan: #71e4dc;
  --amber: #f4bd54;
  --line: #3c4755;
  --text: #173448;
  --muted: #526b78;
  --panel: #f6faf9;
  --panel-2: #e1eff0;
}

body {
  background-color: #7bb6cb;
  background-image:
    linear-gradient(rgba(110, 132, 151, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 132, 151, .07) 1px, transparent 1px);
  background-size: 16px 16px;
  image-rendering: pixelated;
}

.retro-shell { max-width: 1120px; margin: 22px auto; padding: 14px 22px 20px; background: #e8f1f3; border: 5px solid #fff; outline: 3px solid #477c91; box-shadow: 8px 8px 0 #315c70; color: #152532; }
.portal-banner { min-height: 94px; margin-bottom: 12px; padding: 12px 20px; display: flex; align-items: center; gap: 18px; color: #102c43; border: 3px solid #2b627e; background: repeating-linear-gradient(135deg,#9ed5de 0 12px,#83c2d0 12px 24px); box-shadow: inset 0 0 0 3px #d9f2f2; }
.banner-badge { padding: 10px; color: #fff; background: #144e70; border: 3px solid white; font: 9px/1.6 var(--font-mono); }
.portal-banner strong { font: 18px/1.5 var(--font-display); text-shadow: 2px 2px #fff; }
.portal-banner a { margin-left: auto; padding: 10px 14px; color: #fff; background: #c33749; border: 3px solid #792432; box-shadow: 3px 3px #55222c; font: 8px var(--font-mono); }
.portal-banner small { font: 8px var(--font-mono); }

.topbar {
  height: 76px;
  background: #fff;
  border: 2px solid #b6c8ce;
  border-bottom: 5px solid #31647a;
  box-shadow: none;
  backdrop-filter: none;
}

.brand-mark { transform: none; gap: 2px; }
.brand-mark i { width: 6px; box-shadow: 2px 2px #030508; }
.brand-copy strong { font: 10px var(--font-mono); letter-spacing: 0; }
.brand-copy small { font: 7px var(--font-mono); letter-spacing: 0; margin-top: 4px; }
.main-nav a { font: 8px var(--font-mono); letter-spacing: 0; }
.main-nav a { color: #193e56; padding: 12px 15px; border-left: 1px solid #d4e0e4; }

.online-chip {
  min-width: 176px;
  border: 2px solid #04070b;
  border-radius: 0;
  background: #18232f;
  box-shadow: 3px 3px 0 #030508, inset 2px 2px 0 #2d3d4c;
}
.online-chip:hover { border-color: #05080c; box-shadow: 3px 3px 0 #030508, inset 2px 2px 0 var(--cyan); }
.online-chip b { font: 13px var(--font-body); color: var(--green); }
.online-chip small { font: 6px var(--font-mono); letter-spacing: 0; }
.status-light { width: 8px; height: 8px; border-radius: 0; box-shadow: 2px 2px 0 #05080c; }
.status-light.offline { border-radius: 0; }

.hero {
  min-height: 624px;
  background-color: #f6faf9;
  background-image: linear-gradient(90deg, transparent 0 49%, rgba(47, 116, 143, .05) 50%, transparent 51%);
  border: 2px solid #c2d4d9;
}
.hero:before { display: none; }
.eyebrow { font: 7px var(--font-mono); letter-spacing: 0; line-height: 1.8; }
.eyebrow-line { width: 16px; height: 4px; background: var(--amber); box-shadow: 2px 2px #05080c; }
.hero h1 {
  font: 400 clamp(37px, 5.2vw, 68px)/1.35 var(--font-display);
  letter-spacing: -4px;
  margin: 30px 0 20px;
  text-shadow: 4px 4px 0 #030508;
}
.hero h1 em { color: var(--cyan); }
.hero h1 em { color: #167d9b; }
.hero-description { color: #bec8cc; font: 24px/1.05 var(--font-body); max-width: 430px; }
.button {
  min-height: 50px;
  border-radius: 0;
  border: 2px solid #04070b;
  box-shadow: 3px 3px 0 #030508;
  font: 7px/1.5 var(--font-mono);
  letter-spacing: 0;
  transition: transform .08s steps(2), box-shadow .08s steps(2), background .08s steps(2);
}
.button:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #030508; }
.button-primary { color: #061214; background: var(--cyan); border-color: #04070b; box-shadow: 3px 3px 0 #030508, inset 2px 2px 0 #c2fff6; }
.button-primary:hover { background: #8ff3e8; }
.button-secondary { background: #17212b; border-color: #04070b; box-shadow: 3px 3px 0 #030508, inset 2px 2px 0 #334353; color: #d1d9dd; }
.hero-meta { font: 6px var(--font-mono); letter-spacing: 0; color: #9daab2; }
.meta-dot { width: 5px; height: 5px; border-radius: 0; }

.art-frame {
  border: 4px solid #315e72;
  border-radius: 0;
  background: #d8e9ec;
  box-shadow: 5px 5px 0 #7599a5;
  transform: none;
}
.art-frame:after { display: none; }
.art-topline { height: 34px; background: #17222d; border-bottom: 3px solid #05080c; font: 6px var(--font-mono); letter-spacing: 0; }
.art-topline span:last-child { color: var(--amber); }
.city-svg { image-rendering: pixelated; shape-rendering: crispEdges; }
.gameplay-shot { display:block; width:100%; aspect-ratio: 1.5; object-fit:cover; object-position:center; image-rendering:pixelated; border: 0; }
.art-frame .city-svg { display:none; }
.screenshots-section { padding: 58px 0 42px; color:#173448; }
.screenshots-heading { margin-bottom:18px; }
.screenshots-heading h2 { margin:14px 0 8px; font:16px/1.6 var(--font-display); }
.screenshots-heading p { margin:0; color:#526b78; font:22px/1.05 var(--font-body); }
.screenshots-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:14px; }
.screenshot-card { min-width:0; margin:0; overflow:hidden; background:#fff; border:3px solid #315e72; box-shadow:4px 4px 0 #7599a5; }
.screenshot-card img { display:block; width:100%; height:190px; object-fit:cover; image-rendering:pixelated; }
.screenshot-wide { grid-row:span 2; }
.screenshot-wide img { height:100%; min-height:394px; }
.screenshot-card figcaption { display:flex; justify-content:space-between; padding:10px 12px; background:#173448; color:#fff; font:7px/1.6 var(--font-mono); }
.screenshot-card figcaption span { color:#f4bd54; }
.art-coordinates { height: 31px; background: #111a23; border-top: 3px solid #05080c; font: 6px var(--font-mono); letter-spacing: 0; }
.art-coordinates>span { font-size: 9px; }
.art-note { font: 6px var(--font-mono); letter-spacing: 0; right: -4px; bottom: 17px; transform: none; }
.note-line { height: 3px; }
.hero-scroll { font: 6px var(--font-mono); letter-spacing: 0; }
.hero-scroll i { width: 4px; height: 24px; background: repeating-linear-gradient(to bottom, var(--amber) 0 4px, transparent 4px 8px); }

.world-strip {
  background: #d7e8ea;
  border-top: 4px solid #05080c;
  border-bottom: 4px solid #05080c;
  box-shadow: inset 0 2px 0 #34414c, inset 0 -2px 0 #34414c;
}
.world-strip>div { border-color: #27323e; }
.world-strip>div>strong { font: 18px var(--font-display); color: #697783; }
.world-strip span b { font: 6px/1.8 var(--font-mono); letter-spacing: 0; }
.world-strip span small { font: 17px/1 VT323, monospace; color: #a7b3bb; margin-top: 5px; }
.strip-version .status-light { width: 7px; height: 7px; }

.download-section { padding-top: 88px; padding-bottom: 90px; }
.download-section { color: #183448; }
.section-heading h2 { font: 16px/1.7 var(--font-display); letter-spacing: -1px; margin-top: 18px; }
.section-heading p { font: 20px/1 VT323, monospace; color: #b5c0c7; }
.platform-grid { gap: 12px; }
.platform-card {
  min-height: 250px;
  border: 3px solid #05080c;
  border-radius: 0;
  background: #f7fbfa;
  box-shadow: 4px 4px 0 #030508, inset 2px 2px 0 #354450;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.platform-card:hover { transform: translate(2px, 2px); border-color: #05080c; box-shadow: 2px 2px 0 #030508, inset 2px 2px 0 #536371; }
.platform-card:after {
  width: 48px;
  height: 48px;
  top: 0;
  right: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: .55;
  background: repeating-conic-gradient(rgba(113,228,220,.18) 0 25%, transparent 0 50%) 0 0 / 8px 8px;
}
.pc-card:after { background: repeating-conic-gradient(rgba(244,189,84,.2) 0 25%, transparent 0 50%) 0 0 / 8px 8px; }
.android-card:after { background: repeating-conic-gradient(rgba(124,224,161,.2) 0 25%, transparent 0 50%) 0 0 / 8px 8px; }
.platform-icon { border: 2px solid #05080c; border-radius: 0; box-shadow: 2px 2px 0 #030508; font: 19px VT323, monospace; }
.platform-tag { border: 1px solid #3c4954; border-radius: 0; font: 6px/1.6 var(--font-mono); letter-spacing: 0; }
.platform-card h3 { font: 18px/1.7 var(--font-display); letter-spacing: -1px; }
.platform-card p { font: 19px/1.05 VT323, monospace; color: #b1bdc5; }
.platform-link { border-top: 2px solid #05080c; padding-top: 13px; font: 6px/1.8 var(--font-mono); letter-spacing: 0; }
.platform-link span { font: 14px VT323, monospace; }
.download-footnote { font: 16px/1 VT323, monospace; color: #9caab4; }
.download-footnote>span { border: 2px solid #05080c; border-radius: 0; box-shadow: 2px 2px #030508; }

.final-cta {
  min-height: 146px;
  border: 3px solid #05080c;
  border-radius: 0;
  background: #17252b;
  box-shadow: 4px 4px 0 #030508, inset 2px 2px 0 #3e5a5b;
}
.cta-stamp { border: 3px solid #05080c; box-shadow: 2px 2px 0 #030508; border-radius: 0; font: 10px/1.2 var(--font-mono); transform: none; }
.cta-stamp small { font: 5px var(--font-mono); }
.final-cta .eyebrow { font-size: 6px; }
.final-cta h2 { font: 9px/1.8 var(--font-display); letter-spacing: -1px; }
.cta-road { width: 30%; opacity: .35; background: repeating-linear-gradient(135deg, transparent 0 14px, #8798a0 14px 17px, transparent 17px 34px); mask-image: linear-gradient(90deg,transparent,#000); }

.footer { border-top: 4px solid #05080c; background: #101720; font: 6px/1.8 var(--font-mono); letter-spacing: 0; }
.footer { color: #304b5a; background: #d7e8ea; }
.footer-brand .brand-copy strong { font-size: 8px; }
.footer-brand .brand-copy small { font-size: 6px; }

@media(max-width:1050px) {
  .hero h1 { font-size: clamp(34px, 5vw, 52px); }
}
@media(max-width:760px) {
  .retro-shell { margin: 8px; padding: 8px; border-width: 3px; }
  .portal-banner { flex-wrap: wrap; gap: 8px; }
  .portal-banner strong { font-size: 11px; }
  .portal-banner small { display: none; }
  .screenshots-grid { grid-template-columns:1fr 1fr; }
  .screenshot-card img { height:128px; }
  .screenshot-wide { grid-row:auto; }
  .screenshot-wide img { height:150px; min-height:0; }
  .screenshots-heading h2 { font-size:12px; }
  .topbar { height: 66px; }
  .brand-copy strong { font-size: 8px; }
  .brand-copy small { font-size: 6px; }
  .online-chip b { font-size: 14px; }
  .online-chip small { font-size: 5px; }
  .eyebrow { font-size: 6px; }
  .hero h1 { font-size: clamp(31px, 9vw, 47px); line-height: 1.55; letter-spacing: -3px; }
  .hero-description { font-size: 21px; }
  .button { font-size: 6px; }
  .hero-meta { font-size: 5px; flex-wrap: wrap; line-height: 1.8; }
  .world-strip span b { font-size: 5px; }
  .world-strip span small { font-size: 15px; }
  .section-heading h2 { font-size: 12px; line-height: 1.9; }
  .section-heading p { font-size: 18px; }
  .platform-card { min-height: 220px; }
  .platform-card h3 { font-size: 14px; }
  .platform-card p { font-size: 18px; }
  .platform-link { font-size: 5px; }
  .final-cta h2 { font-size: 8px; line-height: 2; }
  .final-cta .eyebrow { font-size: 5px; }
  .footer { font-size: 5px; }
}

/* More like a hand-built game portal: pixel lettering is reserved for labels. */
:root { --font-display: 'Trebuchet MS', Arial, sans-serif; --font-mono: 'Trebuchet MS', Arial, sans-serif; --font-body: Arial, sans-serif; }
body { background-color:#87bfd2; background-image:radial-gradient(#6ea9bf 1px,transparent 1px); background-size:12px 12px; }
.retro-shell { max-width:1260px; margin:18px auto; padding:16px 24px 24px; background:#f3f7f5; border:4px solid #fff; outline:2px solid #4a8299; box-shadow:6px 6px 0 #37677c; }
.portal-banner { min-height:122px; position:relative; padding:18px 24px; background:linear-gradient(110deg,#78c6df 0%,#c8e9e7 48%,#f4ca61 100%); border:3px solid #477e94; box-shadow:inset 0 0 0 3px rgba(255,255,255,.65); }
.portal-banner:after { content:""; position:absolute; right:20%; bottom:0; width:24%; height:56px; opacity:.28; background:linear-gradient(135deg,transparent 45%,#fff 46% 49%,transparent 50%),linear-gradient(45deg,transparent 45%,#fff 46% 49%,transparent 50%); background-size:22px 22px; }
.banner-badge { font: bold 13px Arial,sans-serif; letter-spacing:-.5px; border:2px solid #fff; box-shadow:2px 2px #31586b; }
.portal-banner strong { font:bold clamp(20px,3vw,34px)/1.1 Arial,sans-serif; letter-spacing:-1px; text-shadow:1px 2px #fff; }
.portal-banner a { z-index:1; font:bold 12px Arial,sans-serif; }
.portal-banner small { z-index:1; font:bold 9px Arial,sans-serif; }
.topbar { height:64px; }
.brand-copy strong { font:bold 13px Arial,sans-serif; letter-spacing:.5px; }
.brand-copy small,.main-nav a,.online-chip small { font:bold 9px Arial,sans-serif; letter-spacing:.3px; }
.main-nav a { padding:12px 18px; }
.online-chip { min-width:150px; }
.online-chip b { font:bold 18px Arial,sans-serif; }
.hero { min-height:490px; grid-template-columns:.82fr 1.18fr; gap:28px; padding-top:40px; padding-bottom:36px; background:#f9fbf8; }
.hero h1 { max-width:520px; font:bold clamp(42px,6vw,76px)/.98 Arial,sans-serif; letter-spacing:-4px; text-shadow:3px 3px #b7dbe0; }
.hero-description { color:#415968; font:19px/1.5 Arial,sans-serif; }
.eyebrow,.hero-meta,.art-topline,.art-coordinates,.art-note,.hero-scroll { font-family:Arial,sans-serif; font-size:9px; font-weight:bold; }
.button { font:bold 11px Arial,sans-serif; }
.art-frame { border-color:#477e94; box-shadow:5px 5px #9abac2; }
.gameplay-shot { aspect-ratio:1.75; }
.screenshots-section { padding:42px 0 30px; }
.screenshots-heading h2 { font:bold 28px Arial,sans-serif; letter-spacing:-1px; }
.screenshots-heading p,.section-heading p { font:16px/1.5 Arial,sans-serif; color:#526b78; }
.screenshots-grid { grid-template-columns:1.25fr 1fr 1fr; gap:12px; }
.screenshot-card { border:2px solid #86aab5; box-shadow:3px 3px #b5cbd0; }
.screenshot-card img { height:205px; }
.screenshot-wide img { min-height:424px; }
.screenshot-card figcaption { background:#e5f0ef; color:#315367; border-top:1px solid #b9d0d4; font:bold 11px Arial,sans-serif; }
.world-strip { border:1px solid #b9d0d4; box-shadow:none; }
.world-strip span b { font: bold 10px Arial,sans-serif; }
.world-strip span small { color:#526b78; font:14px Arial,sans-serif; }
.section-heading h2 { font:bold 28px Arial,sans-serif; }
.platform-card { border:2px solid #8aabb4; box-shadow:3px 3px #bed0d4; }
.platform-card h3 { font:bold 22px Arial,sans-serif; }
.platform-card p { color:#526b78; font:15px/1.5 Arial,sans-serif; }
.platform-link,.platform-tag { font:bold 10px Arial,sans-serif; }
.final-cta { background:#d9ecea; border:2px solid #8aabb4; box-shadow:3px 3px #bed0d4; }
.final-cta h2 { font:bold 20px Arial,sans-serif; }
.footer { font:bold 10px Arial,sans-serif; }
@media(max-width:760px) {
  .hero { grid-template-columns:1fr; min-height:0; }
  .hero h1 { font-size:clamp(40px,12vw,62px); }
  .screenshots-grid { grid-template-columns:1fr 1fr; }
  .screenshot-card img { height:130px; }
  .screenshot-wide img { min-height:0; height:150px; }
  .portal-banner small { display:none; }
}

@media(max-width:760px) {
  html,body { max-width:100%; overflow-x:hidden; }
  .retro-shell { width:auto; max-width:none; margin:7px; padding:8px; outline:0; box-shadow:3px 3px #37677c; }
  .portal-banner { min-height:92px; padding:10px; gap:8px; }
  .banner-badge { font-size:9px; padding:7px; }
  .portal-banner a { padding:8px 9px; font-size:10px; }
  .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; height:auto; min-height:0; padding:8px; }
  .brand { min-width:0; }
  .online-chip { min-width:0; padding:5px 7px; gap:5px; }
  .online-chip .online-icon { width:26px; height:26px; }
  .online-chip b { font-size:15px; }
  .online-chip small { font-size:6px; }
  .main-nav { display:flex; grid-column:1/-1; width:100%; justify-content:space-around; margin:0; gap:0; border-top:1px solid #d4e0e4; }
  .main-nav a { min-height:42px; padding:5px 7px; gap:5px; font-size:9px; }
  .main-nav a img { width:28px; height:28px; flex-basis:28px; }
  .hero { display:flex; flex-direction:column; gap:22px; min-height:0; margin-bottom:18px; padding:24px 14px; }
  .hero h1 { margin:18px 0 14px; font-size:clamp(38px,11vw,58px); line-height:1.04; letter-spacing:-2px; }
  .hero-description { max-width:none; font-size:16px; line-height:1.45; }
  .hero-actions { display:grid; grid-template-columns:1fr; gap:9px; }
  .hero-meta { font-size:8px; line-height:1.5; }
  .art-frame { width:100%; }
  .gameplay-shot { aspect-ratio:1.35; }
  .screenshots-section { margin:0 -8px 18px; padding:22px 12px; }
  .screenshots-grid { grid-template-columns:1fr; gap:11px; }
  .screenshot-card img,.screenshot-wide img { width:100%; height:auto; min-height:0; aspect-ratio:1.7; object-fit:cover; }
  .world-strip { grid-template-columns:1fr 1fr; margin:0 -8px 16px; padding:14px 10px; gap:14px 6px; }
  .world-strip>div { min-width:0; gap:7px; }
  .world-strip span b { font-size:8px; }
  .world-strip span small { font-size:12px; line-height:1.25; }
  .download-section { padding:30px 4px 34px; }
  .section-heading { display:block; margin-bottom:16px; }
  .section-heading h2 { font-size:25px; }
  .section-heading p { font-size:15px; line-height:1.4; }
  .platform-grid { grid-template-columns:1fr; gap:10px; }
  .platform-card { min-height:190px; padding:16px; }
  .platform-card h3 { font-size:20px; }
  .platform-card p { font-size:14px; }
  .final-cta { margin:10px 0 20px; padding:14px; grid-template-columns:44px minmax(0,1fr); gap:10px; }
  .final-cta h2 { font-size:17px; line-height:1.3; }
  .final-cta>.button { grid-column:1/-1; width:100%; }
  .footer { padding:14px 8px; display:flex; flex-wrap:wrap; gap:10px; font-size:9px; }
  .footer>span:nth-child(2) { width:100%; order:3; }
  .footer>span:last-child { margin-left:auto; font-size:8px; }
}
@media(max-width:380px) {
  .banner-badge { display:none; }
  .portal-banner strong { font-size:15px; }
  .online-chip .online-icon { display:none; }
  .main-nav a { font-size:8px; gap:3px; padding-inline:4px; }
  .main-nav a img { width:25px; height:25px; flex-basis:25px; }
  .world-strip>div>strong { font-size:13px; }
  .world-strip span b { font-size:7px; }
}
.site-logo { display:block; width:128px; height:auto; max-height:60px; object-fit:contain; image-rendering:pixelated; }
.banner-logo { display:block; width:190px; height:auto; max-height:100px; object-fit:contain; image-rendering:pixelated; flex:0 0 auto; }
@media(max-width:760px) { .site-logo { width:94px; max-height:52px; } }
@media(max-width:760px) { .banner-logo { width:130px; max-height:72px; } }

html { scroll-behavior:smooth; overflow-y:scroll; scrollbar-gutter:stable; }
[hidden] { display:none !important; }
.page-resizing { overflow:hidden; transition:height 320ms cubic-bezier(.22,.7,.25,1); }
.screen-enter { animation:screen-enter 260ms ease-out both; }
@keyframes screen-enter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .page-resizing { transition:none; } .screen-enter { animation:none; } }
.main-nav a[aria-current="page"] { background:#dcebed; color:#b5483b; box-shadow:inset 0 -3px #b5483b; }
.main-nav a { gap:7px; }
.main-nav a img { display:block; width:32px; height:32px; image-rendering:pixelated; flex:0 0 32px; }
.platform-icon { display:grid; place-items:center; width:40px; height:40px; padding:2px; }
.platform-icon img { display:block; width:32px; height:32px; image-rendering:pixelated; }
.online-chip .online-icon { display:block; width:32px; height:32px; image-rendering:pixelated; }
.cta-stamp img { display:block; width:32px; height:32px; image-rendering:pixelated; }
#cidade,#galeria,#downloads { scroll-margin-top:18px; }
.main-nav { margin-left:auto; margin-right:18px; }
.main-nav a { display:inline-flex; min-height:42px; align-items:center; font-size:11px; }
.main-nav a:hover { background:#e1f0f0; color:#bd4b3e; }
.hero { margin-bottom:30px; }
.screenshots-section { margin:0 -24px 28px; padding:32px 24px 34px; background:#e4eff0; border-top:2px solid #c0d3d7; border-bottom:2px solid #c0d3d7; }
.world-strip { margin:0 -24px 24px; }
.download-section { padding:48px 0 54px; border-top:2px solid #c0d3d7; }
.final-cta { margin:8px 0 28px; }
@media(max-width:760px) {
  .main-nav { margin:0 auto; }
  .main-nav a { padding:8px; font-size:9px; }
  .screenshots-section { margin-left:-8px; margin-right:-8px; padding:24px 12px; }
  .world-strip { margin-left:-8px; margin-right:-8px; }
}