/* Menu da partida (SideBar do client, modo Build) e Dicas do jogo (Tips) — js/menu-partida.js e js/dicas.js.
   Medidas em unidades do canvas 1920x1200 com match 0,5 (--u = 0,6325 px no palco), lidas de level2 Build/SideBar e Build/Tips.
   ComicFlat (128 ppu, borda 24 px) = branco com contorno preto de 4 px e cantos de 8; ButtonShadeOrange/Red (512 px, ppu 380)
   = borda de 70/3,8 unidades nos lados e no alto e 160/3,8 embaixo (a sombra). */
.sb-layer, .tp-layer { position: absolute; inset: 0; z-index: 40; --u: 0.632456px; }
.sb-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .502); } /* Blackground: fecha ao clicar */

/* Layout/Menu: âncora no canto superior direito do Layout (tela menos 16 de cada lado), 550 de largura, altura pelo conteúdo */
.sb-menu { position: absolute; right: calc(16 * var(--u)); top: calc(16 * var(--u)); width: calc(550 * var(--u));
  padding: calc(16 * var(--u) - 4px) calc(16 * var(--u) - 4px) calc(20 * var(--u) - 4px);
  display: flex; flex-direction: column; gap: calc(12 * var(--u)); background: #fff; border: 4px solid #000; border-radius: 8px; }

/* botão do prefab: Tween/Background (o sprite, onde vai o HoverGUI) e Tween/Padding (24 dos lados, 20 em cima, 36 embaixo) */
.sb-btn { position: relative; z-index: 0; display: block; flex: none; height: calc(140 * var(--u)); }
.sb-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-style: solid;
  border-width: calc(70 / 3.8 * var(--u)) calc(70 / 3.8 * var(--u)) calc(160 / 3.8 * var(--u));
  border-image: url("../img/sprites/ButtonShadeOrange.png") 70 70 160 fill; }
.sb-btn.red::before { border-image-source: url("../img/sprites/ButtonShadeRed.png"); }
.sb-pad { position: absolute; left: calc(24 * var(--u)); right: calc(24 * var(--u)); top: calc(20 * var(--u)); bottom: calc(36 * var(--u));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--display); font-weight: 700; line-height: 1; color: #651f00; white-space: nowrap; }
.sb-btn.red .sb-pad { color: #300; }
.sb-label, .sb-value { flex: none; }
.sb-value { margin-left: auto; padding-left: .4em; } /* Spacer flexível: rótulo à esquerda, valor à direita */
.sb-btn:hover::before, .sb-btn:focus-visible::before { filter: url(#hover-gui); }
.sb-btn:active:not(:disabled)::before, .sb-btn:active:not(:disabled) .sb-pad { translate: 0 calc(8 * var(--u)); } /* SetPressed */
.sb-btn:disabled::before { filter: grayscale(.6) brightness(.8); }
.sb-btn:disabled .sb-pad { opacity: .55; }

/* Tips: painel de 1600x900 no centro; Pages (1568x692) em cima, BottomBar (140) embaixo, contador 16 acima do canto direito */
.tp-panel { position: absolute; left: calc(640px - 800 * var(--u)); top: calc(360px - 450 * var(--u)); width: calc(1600 * var(--u)); height: calc(900 * var(--u));
  padding: calc(16 * var(--u) - 4px) calc(16 * var(--u) - 4px) calc(20 * var(--u) - 4px);
  display: flex; flex-direction: column; gap: calc(32 * var(--u)); background: #fff; border: 4px solid #000; border-radius: 8px; }
.tp-counter { position: absolute; right: -4px; bottom: calc(100% + 4px + 16 * var(--u)); width: calc(240 * var(--u)); height: calc(80 * var(--u));
  background: #fff; border: 4px solid #000; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: calc(64 * var(--u)); line-height: 1; color: #000; }
.tp-pages { position: relative; flex: 1 1 0; min-height: 0; }
.tp-page { position: absolute; left: 0; top: 0; width: calc(1568 * var(--u)); height: calc(692 * var(--u)); }
.tp-text { position: absolute; left: calc(32 * var(--u)); right: calc(32 * var(--u)); top: calc(32 * var(--u)); height: calc(404 * var(--u)); margin: 0;
  overflow: hidden; text-align: center; font-family: var(--display); font-weight: 700; line-height: 1.2; color: #000; }
.tp-img { position: absolute; display: block; pointer-events: none; }
.tp-img.tint { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.tp-num { position: absolute; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; line-height: 1;
  color: #fff; -webkit-text-stroke: 4px #000; paint-order: stroke fill; pointer-events: none; }
/* BottomBar: Anterior, Próxima, espaço de 200 e Fechar (500 cada), encolhidos na mesma proporção para caber nas 1568 */
.tp-bar { flex: none; display: flex; gap: calc(16 * var(--u)); height: calc(140 * var(--u)); }
.tp-bar .sb-btn { flex: 0 1 calc(500 * var(--u)); min-width: 0; height: auto; }
.tp-space { flex: 0 1 calc(200 * var(--u)); min-width: 0; }