@font-face {
  font-family:'Press Start 2P';
  src:url('/branding/PressStart2P-Regular.ttf') format('truetype');
  font-display:swap
}
:root {
  --hub-bg:#0b1015;
  --hub-panel:#121a21;
  --hub-yellow:#f2c94c;
  --hub-orange:#f2994a;
  --hub-line:#2a3642;
  --hub-muted:#91aaa9;
  --hub-font:'JetBrains Mono',Consolas,monospace;
  --hub-title:'Press Start 2P',monospace;
  color-scheme:dark
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:96px
}
body {
  margin:0
}
body.portal-home {
  background:var(--hub-bg);
  color:#fff;
  font-family:var(--hub-font);
  font-size:14px
}
.hub *,.portal-bar *,.portal-footer * {
  box-sizing:border-box
}
.hub a,.portal-bar a,.portal-footer a {
  color:inherit;
  text-decoration:none
}
.hub button,.portal-bar button {
  font:inherit;
  cursor:pointer
}
.hub button,.hub input,.hub a,.portal-bar a,.portal-bar button {
  touch-action:manipulation
}
.hub :focus-visible,.portal-bar :focus-visible {
  outline:2px solid var(--hub-yellow);
  outline-offset:5px
}
.hub h1,.hub h2,.hub h3,.hub p {
  margin:0
}
.hub:after {
  content:'';
  position:fixed;
  inset:0;
  z-index:20;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px);
  opacity:.07
}
.portal-bar {
  position:fixed;
  inset:0 0 auto;
  z-index:30;
  height:72px;
  background:#0a0a0af5;
  border-bottom:1px solid var(--hub-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 max(20px,calc((100vw - 1240px)/2));
  font-family:var(--hub-font);
  color:#fff
}
.portal-bar .brand {
  display:flex;
  align-items:center;
  min-height:44px;
  max-width:50vw;
  flex:0 1 166px
}
.portal-bar .brand-logo {
  width:166px;
  height:auto;
  max-height:64px;
  object-fit:contain
}
.portal-slogan {
  display:none;
  font-size:10px;
  color:var(--hub-muted);
  letter-spacing:2px
}
.portal-actions {
  display:flex;
  align-items:center;
  gap:14px
}
.portal-alpha {
  font-size:10px;
  letter-spacing:1px;
  color:#a8dc77;
  white-space:nowrap
}
.portal-settings {
  width:44px;
  height:44px;
  color:#b7c6c4;
  border:1px solid var(--hub-line);
  background:transparent;
  font-size:23px!important
}
.portal-settings:hover {
  border-color:var(--hub-yellow);
  color:var(--hub-yellow)
}
.hub main {
  padding-top:72px
}
.hub-hero {
  border-bottom:1px solid var(--hub-line);
  background:radial-gradient(ellipse at 50% 10%,#f2c94c0b,transparent 70%);
  text-align:center
}
.hub-hero-copy {
  max-width:760px;
  margin:auto;
  padding:38px 24px 44px
}
.hub-intro-logo {
  display:block;
  width:min(380px,100%);
  height:auto;
  margin:0 auto
}
.hub-kicker {
  font-size:10px;
  letter-spacing:2px;
  line-height:1.8;
  color:var(--hub-orange);
  font-weight:700
}
.hub h1 {
  font-family:var(--hub-title);
  font-size:clamp(18px,3.2vw,30px);
  line-height:1.7;
  margin:22px 0 18px;
  color:var(--hub-yellow);
  text-shadow:3px 4px 0 #08090c
}
.hub h1 span {
  color:var(--hub-orange)
}
.hub-lead {
  color:#c8cac4;
  font-size:12px;
  line-height:1.9;
  max-width:590px;
  margin-inline:auto!important
}
.hub-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:50px;
  padding:16px 20px;
  background:var(--hub-yellow);
  color:#17170d!important;
  border:1px solid var(--hub-yellow);
  box-shadow:4px 4px 0 #71592c;
  font:700 11px/1.6 var(--hub-font);
  letter-spacing:.8px;
  text-transform:uppercase;
  transition:background .15s,transform .15s
}
.hub-button:hover {
  background:#ffe08a;
  transform:translateY(-2px)
}
.hub-button span {
  font-size:18px;
  flex-shrink:0
}
.hub-button-outline {
  background:#10151a88;
  color:#ebded0!important;
  border-color:#6e5741;
  box-shadow:none
}
.hub-button-outline:hover {
  background:#292019;
  border-color:var(--hub-yellow)
}
.hub-content {
  max-width:1240px;
  padding:0 20px;
  margin:auto
}
.hub-section {
  padding:48px 0;
  border-bottom:1px solid var(--hub-line);
  scroll-margin-top:24px
}
.hub-section-label {
  font:700 11px/1.8 var(--hub-font);
  color:var(--hub-orange);
  letter-spacing:2px;
  margin-bottom:24px!important
}
.hub-section>h2:not(.hub-section-label) {
  font:400 clamp(17px,3vw,28px)/1.7 var(--hub-title);
  margin:10px 0
}
.hub-section-description {
  font-size:11px;
  color:var(--hub-muted);
  line-height:1.9;
  margin-bottom:28px!important
}
.hub-card {
  display:flex;
  flex-direction:column;
  background:var(--hub-panel);
  border:1px solid var(--hub-line);
  min-width:0;
  transition:transform .18s,border-color .18s,box-shadow .18s
}
.hub-card-art {
  display:block;
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-bottom:1px solid var(--hub-line)
}
.hub-card-art img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  image-rendering:pixelated
}
.hub-card-label,.hub-new {
  position:absolute;
  top:14px;
  padding:5px 8px;
  font-size:9px;
  letter-spacing:1px
}
.hub-card-label {
  left:14px;
  background:#0b1015de;
  border:1px solid #657474;
  color:#c9dad4
}
.hub-new {
  right:14px;
  background:var(--hub-orange);
  color:#19130c;
  font-weight:bold
}
.hub-card-copy {
  flex:1;
  padding:23px;
  display:flex;
  flex-direction:column;
  gap:15px
}
.hub-card-copy h3 {
  font:400 16px/1.8 var(--hub-title);
  text-transform:uppercase;
  color:#ffe29b;
  text-shadow:2px 3px #000;
  overflow-wrap:anywhere
}
.hub-card-copy>p:not(.hub-kicker) {
  color:#c0c9c7;
  font-size:12px;
  line-height:1.7
}
.hub-card-copy small {
  color:var(--hub-muted);
  font-size:10px;
  line-height:1.8
}
.hub-card-copy .hub-button {
  margin-top:auto
}
.hub-section .hub-grid {
  margin-top:28px;
}
.hub-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:22px
}
.hub-how ol {
  display:grid;
  grid-template-columns:1fr;
  list-style:none;
  padding:0;
  margin:0;
  gap:28px
}
.hub-how li {
  border-left:1px solid #48503e;
  padding-left:22px
}
.hub-how li>span {
  font:400 25px var(--hub-title);
  color:#f2c94c40;
  display:block;
  margin-bottom:20px
}
.hub-how h3 {
  font:700 12px var(--hub-font);
  letter-spacing:1px;
  margin-bottom:12px
}
.hub-how li p {
  color:var(--hub-muted);
  font-size:11px;
  line-height:1.9;
  max-width:310px
}
.portal-footer {
  display:block;
  width:100%;
  padding:30px 0 40px;
  font:10px/1.9 var(--hub-font);
  color:#9bb0aa
}
.portal-footer>div {
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  letter-spacing:1px
}
.portal-footer>div>a {
  color:#ead598;
  font-weight:700
}
.portal-footer nav {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:16px
}
.portal-footer a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}
.portal-footer p {
  margin:5px 0
}
.portal-footer #contato {
  font-size:9px;
  color:#708581
}
.hub-dialog {
  background:var(--hub-panel);
  color:#fff;
  border:1px solid var(--hub-yellow);
  width:min(440px,calc(100% - 40px));
  padding:28px;
  font-family:var(--hub-font)
}
.hub-dialog::backdrop {
  background:#000c
}
.hub-dialog h2 {
  font:400 15px/1.8 var(--hub-title);
  margin:18px 0 28px
}
.hub-dialog label {
  display:flex;
  align-items:center;
  gap:14px;
  min-height:44px;
  font-size:12px;
  margin-bottom:28px
}
.hub-dialog input {
  width:20px;
  height:20px;
  accent-color:var(--hub-yellow)
}
.hub-dialog-close {
  float:right;
  width:44px;
  height:44px;
  border:1px solid var(--hub-line);
  background:transparent;
  color:#fff
}
.hub-dialog .hub-button {
  width:100%
}
@media(min-width:640px) {
  .hub-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .hub-how ol {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
@media(min-width:1000px) {
  .portal-slogan {
    display:block
  }
  .hub-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .hub-content {
    padding:0 40px
  }
  .hub-section {
    padding:60px 0
  }
}
@media(min-width:1400px) {
  .hub-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
}
@media(hover:hover) {
  .hub-card:hover {
    transform:translateY(-4px) scale(1.005);
    border-color:var(--hub-yellow);
    box-shadow:0 0 22px #f2c94c13
  }
}
@media(max-width:380px) {
  .portal-bar {
    padding-inline:14px;
    gap:8px
  }
  .portal-alpha {
    font-size:8px
  }
  .portal-actions {
    gap:8px
  }
  .hub-hero-copy {
    padding-inline:20px
  }
  .hub h1 {
    font-size:18px
  }
  .hub-card-copy {
    padding:19px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .hub * {
    animation:none!important;
    transition:none!important
  }
}
.hub-reduce-motion {
  scroll-behavior:auto
}
.hub-reduce-motion .hub * {
  animation:none!important;
  transition:none!important
}
/* Apenas apresentação do jogo: a sessão e a geometria da arena continuam no CSS existente. */
.portal-game:not(.touch-session) .arcade-page {
  padding-top:72px
}
.portal-game .site-header.portal-bar {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:72px;
  max-width:none;
  gap:18px;
  border-bottom:1px solid var(--hub-line)
}
.portal-game .portal-bar .brand {
  flex-basis:166px
}
.portal-game .portal-bar .brand-logo {
  width:166px;
  max-height:64px
}
.portal-game .portal-bar .header-right {
  margin-left:auto;
  gap:14px
}
.portal-game .portal-bar .icon-button {
  width:44px;
  height:44px
}
.portal-game .portal-bar .build-label {
  color:#a8dc77
}
.portal-game .portal-bar .header-tag {
  font-size:9px
}
.portal-game:not(.touch-session) .intro {
  max-width:1100px;
  margin-inline:auto
}
.portal-game .portal-footer {
  border-top:1px solid var(--hub-line)
}
.portal-game.touch-session .portal-bar {
  display:none
}
@keyframes hub-enter {
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}
.hub main {
  animation:hub-enter .2s ease-out
}
.portal-game .intro {
  animation:hub-enter .2s ease-out
}
.portal-game {
  font-family:var(--hub-font)
}
.portal-game .arena-viewport.showing-menu .duo-slots {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.portal-game .game-menu button {
  min-height:44px
}
@media(max-width:600px) {
  .portal-game .duo-slot .slot-number {
    display:none
  }
  .portal-game .duo-slot .sprite {
    width:44px;
    height:44px;
    background-size:264px 44px;
    animation-name:hub-slot-idle;
    transform:none;
    margin:0 3px 0 -4px
  }
  .portal-game .duo-slot strong {
    font-size:10px
  }
  .portal-game .duo-slot em {
    font-size:7px
  }
  .portal-game .duo-slot small {
    font-size:6px
  }
}
@keyframes hub-slot-idle {
  to {
    background-position:-264px 0
  }
}
.portal-game .arena-viewport.showing-menu .setup-panel {
  position:static;
  top:auto
}

.portal-game .practice-settings select { border-radius: 0; }
/* A barra existente de prévia não deve deslocar a arena em uma sessão por toque. */
.practice-options-panel > summary {
  padding: 12px;
  background: #121a21;
  color: #91aaa9;
  font: 11px var(--hub-font);
  cursor: pointer;
  min-height: 44px;
}
.portal-game.touch-session .practice-options-panel {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  right: env(safe-area-inset-right, 0px);
  z-index: 25;
  max-width: min(420px, 100vw);
}
.portal-game.touch-session .practice-options-panel[open] {
  max-height: 70dvh;
  overflow: auto;
  border: 1px solid #2a3642;
}

/* Os dois jogos mantêm a mesma apresentação, sem bloco de destaque. */
@media(min-width:640px) {
  .hub-grid:has(>.hub-card:nth-child(2):last-child) {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
.portal-game:not(.touch-session) .intro {
  flex-direction:column;
  align-items:flex-start
}
.portal-game .game-subtitle {
  font:400 clamp(10px,1.6vw,16px)/1.8 var(--hub-title);
  color:var(--hub-orange);
  text-shadow:2px 2px #000;
  align-self:stretch;
  text-align:center
}

/* Portal compacto apenas em dispositivos de toque. */
@media(pointer:coarse) {
  .portal-home .hub-hero-copy { padding:24px 20px 28px; }
  .portal-home .hub-intro-logo { width:min(240px,100%); }
  .portal-home .hub h1 { margin:16px 0 12px; }
  .portal-home .hub-lead { font-size:13px; }
  .portal-home .hub-section { padding-block:28px; }
  .portal-home .hub-section .hub-grid { margin-top:20px; }
  .portal-home .hub-card-art { aspect-ratio:16/9; }
  .portal-home .hub-card-copy { padding:18px;gap:12px; }
  .portal-home .hub-card-copy h3 { font-size:14px; }
  .portal-home .hub-card-copy>p:not(.hub-kicker) { font-size:13px; }
  .portal-home .hub-card-copy small { font-size:11px; }
  .portal-home .hub-button { min-height:52px;font-size:12px; }
  .portal-home .portal-footer a,.portal-game .portal-footer a { display:inline-flex;align-items:center;min-width:44px;min-height:44px; }
  .portal-home .portal-bar,.portal-game .portal-bar { height:calc(72px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right)); }
  .portal-home .hub main { padding-top:calc(72px + env(safe-area-inset-top)); }
  .portal-game:not(.touch-session) .arcade-page { padding-top:calc(72px + env(safe-area-inset-top)); }
}