/* Tema do portal no domínio principal; a geometria e os módulos da partida ficam intactos. */
body.portal-punch {
  --mono:var(--hub-font);
  --gold:var(--hub-yellow);
  --cream:#fff;
  background:var(--hub-bg);
  color:#fff;
  font:14px var(--hub-font)
}
.portal-punch:before {
  background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px);
  opacity:.07
}
.portal-punch .masthead {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:72px;
  padding:0 max(20px,calc((100vw - 1240px)/2));
  z-index:30;
  background:#0a0a0af5;
  border-bottom:1px solid #2a3642
}
.portal-punch .top-actions {
  align-items:center
}
.portal-punch .top-actions .portal-alpha {
  margin-right:8px
}
.portal-punch .quiet {
  min-height:44px;
  min-width:44px;
  font:700 10px/1.6 var(--hub-font);
  border-color:var(--hub-line);
  color:var(--hub-muted)
}
.portal-punch .quiet:hover {
  color:var(--hub-yellow);
  border-color:var(--hub-yellow)
}
.portal-punch .cabinet {
  padding-top:88px
}
.portal-punch:not(.playing) .cabinet {
  width:min(480px,calc(100% - 40px));
  max-width:480px
}
.portal-punch:not(.playing) .title-screen {
  background:linear-gradient(#0b10154d,#0b1015b3);
  gap:clamp(6px,2cqw,12px);
  padding:clamp(10px,3cqw,20px)
}
.portal-punch .title-screen h1 {
  font-family:var(--hub-title);
  font-weight:400;
  line-height:1.5;
  transform:none;
  filter:none;
  text-shadow:3px 4px #000
}
.portal-punch .super {
  font-size:clamp(13px,3.8cqw,19px);
  letter-spacing:2px;
  color:var(--hub-yellow)
}
.portal-punch .punch {
  font-size:clamp(28px,8cqw,42px);
  color:var(--hub-orange);
  background:none;
  -webkit-text-fill-color:currentColor;
  letter-spacing:2px
}
.portal-punch .eleitoral {
  font-size:clamp(12px,3.5cqw,18px);
  line-height:1.5;
  color:var(--hub-yellow);
  letter-spacing:1px;
  text-shadow:3px 4px #000
}
.portal-punch .primary {
  background:var(--hub-yellow);
  color:#17170d;
  border:1px solid var(--hub-yellow);
  border-radius:0;
  box-shadow:4px 4px #71592c;
  font:700 11px/1.6 var(--hub-font);
  letter-spacing:.8px;
  min-height:44px
}
.portal-punch .primary:hover {
  background:#ffe08a
}
.portal-punch .controls-footer {
  font-size:10px;
  line-height:1.8;
  gap:12px
}
.portal-punch .portal-footer {
  border-top:1px solid var(--hub-line);
  margin-top:24px
}
.portal-punch .body-hint {
  white-space:normal
}
.portal-punch:not(.playing) .title-screen .eyebrow {
  font-size:clamp(6px,1.5cqw,9px);
  background:#0b1015e8;
  color:var(--hub-muted);
  border:1px solid var(--hub-line);
  padding:5px 8px
}
@media(max-width:650px) {
  .portal-punch .masthead {
    gap:6px;
    padding-inline:8px
  }
  .portal-punch .brand {
    flex:0 0 112px;
    max-width:112px
  }
  .portal-punch .brand-logo {
    width:112px
  }
  .portal-punch .top-actions .portal-alpha {
    display:none
  }
  .portal-punch .top-actions {
    gap:3px
  }
  .portal-punch .quiet {
    font-size:7px;
    padding:8px 5px
  }
  .portal-punch .controls-footer {
    font-size:8px
  }
}
/* Mantém a altura e a disposição da área ativa em paisagem com toque. */
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  .portal-punch.playing .masthead {
    position:static;
    height:43px;
    padding:0;
    border:0;
    background:transparent
  }
  .portal-punch.playing .cabinet {
    padding-top:0
  }
}
@media(prefers-reduced-motion:reduce) {
  .portal-punch * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}
.portal-punch:not(.playing) .selection-screen {
  overflow:auto;
  justify-content:flex-start;
  padding:12px;
  gap:9px
}


.portal-punch #arena {
  border-color:var(--hub-line);
  box-shadow:4px 4px #05080b;
  outline:none
}
.portal-punch .title-copy {
  color:#c8cac4!important;
  background:#0b1015cc;
  font-size:clamp(7px,1.5cqw,10px)!important;
  letter-spacing:1px;
  padding:4px 6px
}
.portal-punch .edition {
  color:var(--hub-muted);
  font-size:clamp(6px,1.6cqw,9px)
}
.portal-punch .selection-screen {
  background:#121a21f5
}
.portal-punch .screen h2,.portal-punch dialog h2 {
  font-family:var(--hub-title);
  font-weight:400;
  font-size:clamp(12px,3cqw,16px);
  line-height:1.8;
  color:var(--hub-yellow);
  letter-spacing:0;
  text-shadow:2px 3px #000
}
.portal-punch .fighter-card,.portal-punch .difficulty button,
.portal-punch .panel,.portal-punch dialog,.portal-punch .touch-controls {
  background:var(--hub-panel);
  border-color:var(--hub-line);
  border-radius:0
}
.portal-punch .fighter-card.selected,.portal-punch .difficulty button.selected {
  border-color:var(--hub-yellow)
}
.portal-punch .fighter-card strong {
  font-family:var(--hub-title);
  font-size:12px;
  font-weight:400;
  line-height:1.8
}
.portal-punch .controls-footer {
  border-color:var(--hub-line);
  color:var(--hub-muted)
}
.portal-punch kbd {
  background:var(--hub-panel);
  border-color:var(--hub-line);
  border-radius:0;
  color:#fff
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  .portal-punch.playing .portal-footer {
    display:none
  }
}

/* A logo cabe no cabeçalho compacto original durante a luta por toque em paisagem. */
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  .portal-punch.playing .brand {
    flex-basis:96px;
    max-width:96px
  }
  .portal-punch.playing .brand-logo {
    width:96px;
    max-height:40px
  }
}

.portal-punch button:focus-visible,.portal-punch a:focus-visible {
  outline:2px solid var(--hub-yellow);
  outline-offset:4px
}