/* Nome da equipe: a tela Dock da cena Build (teamname.js). Medidas em unidades do jogo a 1280/14 = 91.43 px por unidade
   (a câmera enquadra 14 unidades do Dock na largura). Cada caixa é o prefab DockBoxNoun/DockBoxAdjective:
   Platform = sprite Space em escala 1.5 x 1 na origem; Tween/Content 0.25 acima, com Background = StickerGreen/StickerBlue
   fatiado 3 x 1 (borda de 32 px num sprite de 128 px/unidade = 0.25 unidade), Pressed = BoxWhite fatiado 3 x 1 com alfa 0.5,
   texto TMP (área 2.5 x 0.8, autosize até 0.4 unidade) e SelectorView = StickerSelectorBlack (aparece com o ponteiro em cima);
   Indicator = ArrowDown (escala 0.2) 1.2 acima da origem, balançando 0.1 unidade (PositionAnimator). */
.dock { position: absolute; inset: 0; z-index: 20; }
.dock-world { position: absolute; inset: 0; transform-origin: 640px 360px; }
.dock.waiting .dock-world, .dock.waiting .dock-ui { visibility: hidden; }

.dock-box { position: absolute; width: 274.29px; height: 91.43px; touch-action: manipulation; }
.dock-box:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 12px; }
.dock-stone { position: absolute; left: 68.57px; top: 22.86px; width: 137.14px; height: 91.43px; max-width: none; object-fit: fill; pointer-events: none; } /* escala 1.5 x 1 */
.dock-tween { position: absolute; inset: 0; z-index: 1; }
.dock-sticker, .dock-pressed, .dock-selector { position: absolute; inset: 0; border-style: solid; pointer-events: none; }
.dock-sticker { border-width: 22.86px; border-image: url("../img/sprites/StickerGreen.png") 32 fill; }
.dock-box.adjective .dock-sticker { border-image-source: url("../img/sprites/StickerBlue.png"); }
.dock-pressed { display: none; border-width: 11.43px; border-image: url("../img/sprites/BoxWhite.png") 16 fill; opacity: .5; }
/* o PNG do seletor foi recortado a 124 px (2 px de margem transparente em cada lado do sprite de 128) */
.dock-selector { display: none; inset: 1.43px; border-width: 21.43px; border-image: url("../img/sprites/StickerSelectorBlack.png") 30 fill; }
.dock-text { position: absolute; left: 22.86px; top: 9.14px; width: 228.57px; height: 73.14px; display: flex; align-items: center; pointer-events: none;
  font-family: var(--display); font-weight: 700; font-size: 36.57px; line-height: 1.02; color: #fff; }
.dock-text > span { display: block; width: 100%; text-align: center; translate: 0 -3px; } /* a Fredoka assenta mais baixo que a LapsusPro do jogo */
.dock-text.one > span { white-space: nowrap; }
.dock-arrow { position: absolute; left: 118.3px; top: -64.55px; width: 37.67px; height: 46.81px; max-width: none; z-index: 2; display: none; pointer-events: none; }
.dock-row.hint .dock-arrow { display: block; animation: dock-bob .6283s ease-in-out infinite alternate; } /* sin(5 t): meio período = pi/5 s */
.dock-box.chosen .dock-pressed { display: block; }
.dock:not(.locked) .dock-box:hover .dock-selector, .dock:not(.locked) .dock-box:focus-visible .dock-selector { display: block; }
.dock:not(.locked) .dock-box:active .dock-tween { translate: 0 4.57px; } /* PointerCapture.SetPressed: Tween desce 0.05 unidade */

/* Dock/Canvas: CanvasScaler 1920 x 1200 com match 0.5 -> 0.63 px por unidade de UI a 1280 x 720.
   CTA = Label com fundo BoxWhite preto a 50% e texto com SizePulse (escala 1 + 0.05 sen(2 t));
   Naming = a mesma caixa no canto de baixo à esquerda, com o nome sendo montado; Confirm só com as duas escolhas. */
.dock-ui { position: absolute; inset: 0; pointer-events: none; }
.dock-ui > button { pointer-events: auto; }
.dock.closing .dock-ui { display: none; }
.dock-cta, .dock-name { position: absolute; background: rgba(0, 0, 0, .5); border-radius: 7px; color: #fff; font-family: var(--display); font-weight: 700; white-space: nowrap; }
.dock-cta { left: 50%; top: 8px; transform: translateX(-50%); padding: 1px 16px 5px; font-size: 27px; }
.dock-cta span { display: inline-block; animation: dock-pulse 3.1416s ease-in-out infinite; }
.dock-name { left: 7px; bottom: 8px; padding: 2px 9px 10px 8px; font-size: 25px; }
.dock-confirm { left: 980px; top: 646px; width: 290px; }
.dock-confirm[hidden] { display: none; }

@keyframes dock-bob { from { translate: 0 9.14px; } to { translate: 0 -9.14px; } }
@keyframes dock-pulse { 0%, 100% { scale: 1; } 25% { scale: 1.05; } 75% { scale: .95; } }
@media (prefers-reduced-motion: reduce) { .dock-row.hint .dock-arrow, .dock-cta span { animation: none; } }