/* Jogo "Visitar a feira" (public/assets/js/expo): palco, HUD e textos sobre o canvas, no visual do protótipo aprovado.
 *
 * - O mundo é sempre claro (Estilo Intercambie desenhado por código), então o HUD também: superfícies brancas, texto
 *   #2f3052, sombras puxadas para o índigo. Nada de gradiente novo.
 * - Tela cheia: .is-full no palco (camada fixa, z-index 160, acima do shell e abaixo de avisos e diálogos) e
 *   html.game-full; em tela cheia aparecem também Avatar e Estandes ([data-full-only]).
 * - Celular estreito: a ferramenta quebra linha, o minimapa encolhe e a conversa ocupa a largura.
 */
.game-stage {
  --g-text: #2f3052; --g-text-2: #5b5d7e; --g-muted: #8f91ac; --g-line: #e6e7f2; --g-soft: #f7f7fd; --g-primary: #615dfa;
  --g-shadow: 0 1px 2px rgba(47, 48, 82, .04), 0 4px 18px rgba(47, 48, 82, .06);
  --g-shadow-lg: 0 10px 40px rgba(47, 48, 82, .14);
  position: relative; overflow: hidden; overflow: clip; border-radius: inherit; background: #d5d6ef; color: var(--g-text);
  font: 13px/1.45 var(--font, ui-sans-serif, system-ui, sans-serif); user-select: none; -webkit-user-select: none; outline: none;
  isolation: isolate; -webkit-tap-highlight-color: transparent;
}
.game-stage:focus-visible { box-shadow: inset 0 0 0 3px rgba(97, 93, 250, .45); }
.game-stage button { font-family: inherit; }
.game-stage > .game-view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.game-stage .ico { display: inline-block; vertical-align: middle; flex: none; }

/* tela cheia: uma camada fixa sobre a página (a Fullscreen API no <html> só esconde a interface do navegador) */
.game-stage.is-full { position: fixed; inset: 0; z-index: 160; width: auto; height: auto; border-radius: 0; }
html.game-full, html.game-full body { overflow: hidden; }
.game-stage.is-full .game-hud { inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.game-stage:not(.is-full) [data-full-only] { display: none; }
/* celular na tela cheia (computador): fixo à direita, por cima do jogo; os controles e a planta vão para a
   esquerda dele e a barra de conversa do palco sai (a conversa está no celular) */
html.game-full.game-phone .phone[data-phone] { position: fixed; top: 16px; right: 16px; bottom: 16px; width: var(--full-phone-w, 360px); height: auto; z-index: 170; margin: 0; }
html.game-full.game-phone .game-stage.is-full .game-hud { right: calc(var(--full-phone-w, 360px) + 16px); }
html.game-full.game-phone .game-stage.is-full .game-chat { display: none; }
@media (max-width: 900px) { .game-tool[data-desk-only] { display: none; } }

/* textos sobre o canvas: nomes dos estandes, crachás e balões (posição por transform, âncora no meio da base) */
.game-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.game-label, .game-tag, .game-say { position: absolute; left: 0; top: 0; will-change: transform; }
.game-label[hidden], .game-tag[hidden], .game-say[hidden] { display: none; }
/* nomes aparecem e somem suave (o jogo espera o esmaecer antes de esconder) */
.game-label, .game-tag, .game-say { transition: opacity .4s ease; }
.game-label, .game-tag { animation: game-name-in .35s ease; }
.game-label.is-out, .game-tag.is-out, .game-say.is-out { opacity: 0; }
@keyframes game-name-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .game-label, .game-tag { transition: none; animation: none; } }
.game-label { height: 22px; padding: 0 8px 0 19px; border-radius: 11px; background: rgba(255, 255, 255, .96); box-shadow: 0 2px 8px rgba(47, 48, 82, .18); color: var(--g-text); font-weight: 700; font-size: 11.5px; line-height: 22px; white-space: nowrap; }
.game-label > i { position: absolute; left: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%; }
.game-label.is-hot { background: var(--g-text); color: #fff; }
.game-label-ok { display: none; position: absolute; right: -5px; top: -5px; width: 15px; height: 15px; border-radius: 50%; background: #10b981; color: #fff; place-items: center; box-shadow: 0 0 0 2px #fff; }
.game-label-ok svg { width: 9px; height: 9px; }
.game-label.is-stamped .game-label-ok { display: grid; }
.game-tag { height: 20px; padding: 0 8px; border-radius: 10px; background: rgba(255, 255, 255, .96); box-shadow: 0 2px 8px rgba(47, 48, 82, .18); color: var(--g-text); font-weight: 700; font-size: 11px; line-height: 20px; white-space: nowrap; }
.game-tag.is-me { background: var(--g-primary); color: #fff; }
.game-tag.is-npc { background: rgba(247, 247, 253, .96); color: var(--g-text-2); }
.game-tag.is-channel { background: #fff4dc; color: #8a5a00; }
.game-tag > small { display: block; font-size: 9.5px; font-weight: 600; line-height: 11px; opacity: .78; }
.game-tag > small[hidden] { display: none; }
.game-tag.has-sub { height: auto; padding: 3px 9px 4px; border-radius: 9px; line-height: 13px; text-align: center; }
.game-tag.is-channel::before { content: "▶"; display: inline-block; margin-right: 5px; font-size: 8px; color: #f5a524; vertical-align: 1px; }
.game-tag.is-peer::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #10b981; vertical-align: 1px; }
.game-say { display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: 212px; }
.game-bubble { position: relative; max-width: 212px; padding: 6px 10px 7px; border-radius: 11px; background: #fff; box-shadow: 0 2px 10px rgba(47, 48, 82, .2); animation: game-pop .15s ease-out; }
.game-bubble > b { display: block; overflow: hidden; color: var(--g-muted); font-weight: 800; font-size: 10.5px; line-height: 15px; white-space: nowrap; text-overflow: ellipsis; }
/* o seu balão se destaca dos outros: na cor de quem joga */
.game-bubble.is-mine { background: var(--g-primary); box-shadow: 0 3px 12px rgba(97, 93, 250, .45); }
.game-bubble.is-mine > b { color: rgba(255, 255, 255, .82); }
.game-bubble.is-mine > span { color: #fff; }
.game-bubble.is-mine.has-tail::after { background: var(--g-primary); }
.game-bubble > span { display: -webkit-box; overflow: hidden; color: var(--g-text); font-weight: 600; font-size: 12px; line-height: 16px; overflow-wrap: anywhere; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.game-bubble.is-dots { display: flex; gap: 4px; align-items: center; padding: 7px 10px; border-radius: 12px; }
.game-bubble.is-dots > i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-muted); animation: game-dots 1.1s ease-in-out infinite; }
.game-bubble.is-dots > i:nth-child(2) { animation-delay: .15s; }
.game-bubble.is-dots > i:nth-child(3) { animation-delay: .3s; }
.game-bubble.is-dots.is-mine > i { background: #fff; }
@keyframes game-dots { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .game-bubble.is-dots > i { animation: none; } }
.game-bubble.has-tail::after { content: ""; position: absolute; left: calc(50% + var(--tail, 0px)); bottom: -6px; width: 12px; height: 7px; margin-left: -6px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* HUD */
.game-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.game-hud > * { pointer-events: auto; }
.game-hud > .sr-only { pointer-events: none; }
.game-hud.is-poster > :not(.game-poster), .game-hud.is-loading > :not(.game-state):not(.game-toasts) { display: none; }
.game-chip { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 342px); height: 34px; padding: 0 12px 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: var(--g-shadow); font-weight: 700; white-space: nowrap; }
.game-stage.is-full .game-chip { max-width: calc(100% - 422px); }
.game-chip > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* fora da tela cheia o nome do evento já está no celular: o chip mostra só o estado da sala */
.game-stage:not(.is-full) .game-chip > b { display: none; }
.game-stage.is-full .game-chip > small:not(:empty)::before { content: "· "; }
.game-chip > small { flex: none; color: var(--g-text-2); font-weight: 600; font-size: 12px; }
.game-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--g-muted); box-shadow: 0 0 0 3px rgba(143, 145, 172, .22); }
.game-chip.is-live .game-dot { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .22); }
.game-chip.is-wait .game-dot { background: #f5a524; box-shadow: 0 0 0 3px rgba(245, 165, 36, .22); animation: game-blink 1.2s ease-in-out infinite; }
.game-tools { position: absolute; top: 12px; right: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; max-width: calc(100% - 24px); }
.game-tool { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .95); box-shadow: var(--g-shadow); color: var(--g-text); cursor: pointer; }
.game-tool:hover { color: var(--g-primary); }
.game-tool[aria-pressed="true"] { background: var(--g-primary); color: #fff; }
.game-tool:focus-visible, .game-wave:focus-visible, .game-send:focus-visible, .game-btn:focus-visible, .game-x:focus-visible { outline: 2px solid var(--g-primary); outline-offset: 2px; }
.game-perf { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border: 0; border-radius: 999px; background: rgba(47, 48, 82, .88); box-shadow: var(--g-shadow); color: #fff; font: 700 11.5px/1 var(--font, ui-sans-serif, system-ui, sans-serif); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.game-perf[hidden] { display: none; }
.game-perf > i { color: rgba(255, 255, 255, .45); font-style: normal; }
.game-perf > span:last-child:not([style*="color"]) { color: rgba(255, 255, 255, .8); }
.game-perf:focus-visible { outline: 2px solid var(--g-primary); outline-offset: 2px; }
.game-hud.has-perf .game-chip { max-width: calc(100% - 530px); }
.game-stage.is-full .game-hud.has-perf .game-chip { max-width: calc(100% - 610px); }
.game-perf-panel { position: absolute; top: 56px; right: 12px; z-index: 3; width: 286px; max-width: calc(100% - 24px); padding: 10px 14px 12px; border-radius: 14px; background: rgba(47, 48, 82, .94); box-shadow: var(--g-shadow-lg); color: #fff; animation: game-pop .16s ease-out; }
.game-perf-panel[hidden] { display: none; }
.game-perf-panel header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.game-perf-panel header small { color: rgba(255, 255, 255, .6); font-size: 11px; }
.game-perf-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 11.5px; }
.game-perf-panel dt { color: rgba(255, 255, 255, .62); }
.game-perf-panel dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

.game-chat { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; width: min(470px, calc(100% - 214px)); margin: 0; }
.game-hud:has(.game-mini[hidden]) .game-chat { width: min(470px, calc(100% - 24px)); }
.game-field { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; height: 38px; padding: 0 4px 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .97); box-shadow: var(--g-shadow); }
.game-field:focus-within { box-shadow: 0 0 0 2px rgba(97, 93, 250, .45), var(--g-shadow); }
.game-field input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--g-text); font: 500 13px var(--font, system-ui, sans-serif); user-select: text; }
.game-field input::placeholder { color: var(--g-muted); }
.game-send { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--g-primary); color: #fff; cursor: pointer; }
.game-wave { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .97); box-shadow: var(--g-shadow); color: var(--g-text); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.game-wave:hover { color: var(--g-primary); }

.game-mini { position: absolute; right: 12px; bottom: 12px; width: 184px; height: 140px; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, .96); box-shadow: var(--g-shadow); }
.game-mini[hidden] { display: none; }
.game-mini canvas { display: block; width: 100%; height: 100%; cursor: pointer; }
.game-mini-label { position: absolute; top: 7px; left: 11px; color: var(--g-muted); font-weight: 800; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; pointer-events: none; }

/* cartão do estande ou da pessoa */
.game-card { position: absolute; top: 56px; right: 12px; z-index: 2; width: 252px; max-width: calc(100% - 24px); overflow: hidden; border-radius: 16px; background: #fff; box-shadow: var(--g-shadow-lg); transform-origin: top right; animation: game-pop .16s ease-out; }
.game-card[hidden] { display: none; }
.game-stripe { height: 6px; }
.game-card-in { padding: 10px 14px 14px; }
.game-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.game-code { overflow: hidden; padding: 3px 8px; border-radius: 999px; font-weight: 800; font-size: 11px; letter-spacing: .04em; white-space: nowrap; text-overflow: ellipsis; }
.game-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: var(--g-soft); color: var(--g-text-2); cursor: pointer; }
.game-card h2 { margin: 6px 0 2px; color: var(--g-text); font-size: 17px; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.game-meta { margin: 0 0 12px; color: var(--g-text-2); font-size: 12.5px; }
.game-desc { display: -webkit-box; overflow: hidden; margin: -6px 0 10px; color: var(--g-text-2); font-size: 12px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.game-link { display: inline-block; margin: -4px 0 10px; color: var(--g-primary); font-weight: 700; font-size: 12px; }
.game-row { display: flex; align-items: center; gap: 6px; }
.game-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 13px; border: 1px solid var(--g-primary); border-radius: 999px; background: var(--g-primary); color: #fff; font-weight: 700; font-size: 12.5px; line-height: 1; white-space: nowrap; cursor: pointer; }
.game-btn:disabled { border-color: var(--g-line); background: var(--g-soft); color: var(--g-muted); cursor: default; }
.game-btn.is-done:disabled { border-color: transparent; background: rgba(16, 185, 129, .12); color: #0e9f6e; }
.game-btn.is-ghost { border-color: var(--g-line); background: #fff; color: var(--g-text); }
.game-btn.is-ghost:hover { color: var(--g-primary); }
.game-btn.is-icon { width: 38px; height: 38px; padding: 0; }
.game-dist { display: block; margin-top: 8px; color: var(--g-muted); font-size: 11.5px; line-height: 1.3; }

/* painéis Estandes e Avatar */
.game-panel { position: absolute; top: 56px; left: 12px; bottom: 62px; z-index: 2; display: flex; flex-direction: column; gap: 8px; width: 272px; max-width: calc(100% - 24px); padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--g-shadow-lg); transform-origin: top left; animation: game-pop .16s ease-out; }
.game-panel[hidden] { display: none; }
.game-panel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.game-panel header b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.game-panel header small { color: var(--g-muted); font-weight: 700; font-size: 11.5px; }
.game-search { flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--g-line); border-radius: 10px; background: var(--g-soft); color: var(--g-muted); }
.game-search:focus-within { border-color: var(--g-primary); }
.game-search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--g-text); font: 500 12.5px var(--font, system-ui, sans-serif); user-select: text; }
.game-stands { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1px; margin: 0 -4px; padding: 0 4px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.game-stand { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 14px; align-items: center; gap: 7px; min-height: 28px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--g-text); font-weight: 600; font-size: 12px; text-align: left; cursor: pointer; }
.game-stand[hidden] { display: none; }
.game-stand:hover, .game-stand:focus-visible { background: var(--g-soft); outline: none; }
.game-stand > i { width: 10px; height: 10px; border-radius: 3px; }
.game-stand > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.game-stand > small { color: var(--g-muted); font-weight: 700; font-size: 10.5px; }
.game-stand > em { display: grid; place-items: center; color: #10b981; visibility: hidden; }
.game-stand.is-stamped > em { visibility: visible; }
.game-preview { flex: none; width: 100%; height: 132px; border-radius: 12px; background: rgba(97, 93, 250, .08); }
.game-opt { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 6px; color: var(--g-text-2); font-weight: 700; font-size: 11.5px; }
.game-swatches, .game-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.game-sw { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(47, 48, 82, .14); cursor: pointer; }
.game-sw[aria-pressed="true"] { outline: 2px solid var(--g-primary); outline-offset: 2px; }
.game-chipbtn { height: 26px; padding: 0 10px; border: 1px solid var(--g-line); border-radius: 999px; background: #fff; color: var(--g-text-2); font-weight: 700; font-size: 11.5px; cursor: pointer; }
.game-chipbtn[aria-pressed="true"] { border-color: var(--g-primary); background: var(--g-primary); color: #fff; }
.game-note { margin: auto 0 0; color: var(--g-muted); font-size: 11.5px; }

/* avisos, carga e convite do modo app */
.game-toasts { position: absolute; top: 56px; left: 50%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: calc(100% - 24px); transform: translateX(-50%); pointer-events: none; }
.game-toast { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; box-shadow: var(--g-shadow-lg); font-weight: 700; animation: game-pop .2s ease-out; }
.game-toast > i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; }
.game-toast > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.game-state, .game-boot { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 42%, #f1f2ff 0, #dfe0f6 45%, #cfd1ee 100%); }
.game-boot { border-radius: inherit; }
.game-boot > div { display: grid; justify-items: center; gap: 12px; text-align: center; }
.game-boot p { margin: 0; font-weight: 800; color: #3b3d66; }
/* carregando: três ladrilhos da feira pulando um depois do outro */
.game-loader { position: relative; display: block; width: 64px; height: 52px; }
.game-loader > i { position: absolute; left: 12px; top: 22px; width: 40px; height: 40px; border-radius: 6px; transform: scaleY(.58) rotate(45deg); animation: game-tile 1.2s ease-in-out infinite; }
.game-loader > i:nth-child(1) { background: #615dfa; }
.game-loader > i:nth-child(2) { background: #23d2e2; animation-delay: .15s; top: 12px; }
.game-loader > i:nth-child(3) { background: #f5a524; animation-delay: .3s; top: 2px; }
@keyframes game-tile { 0%, 100% { translate: 0 0; } 40% { translate: 0 -8px; } }
.game-progress.is-indeterminate > i { width: 40%; animation: game-indet 1.1s ease-in-out infinite; }
@keyframes game-indet { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .game-loader > i, .game-progress.is-indeterminate > i { animation: none; } }
.game-state[hidden] { display: none; }
.game-state > div { display: grid; justify-items: center; gap: 10px; max-width: 320px; padding: 14px 18px; border-radius: 14px; background: #fff; box-shadow: var(--g-shadow); text-align: center; }
.game-state p { margin: 0; font-weight: 700; }
.game-progress { width: 220px; max-width: 100%; height: 6px; overflow: hidden; border-radius: 3px; background: var(--g-line); }
.game-progress[hidden] { display: none; }
.game-progress > i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--g-primary); transition: width .15s linear; }
.game-poster { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 6px; padding: 18px; background: #ecedf7; text-align: center; }
.game-poster[hidden] { display: none; }
.game-poster canvas { width: min(100%, 420px); aspect-ratio: 420 / 240; height: auto; }
.game-poster b { font-size: 17px; letter-spacing: -.01em; }
.game-poster p { max-width: 320px; margin: 4px auto 12px; color: var(--g-text-2); }
.game-poster .game-btn { height: 42px; padding: 0 18px; font-size: 13.5px; }

/* celular: "Na feira agora" que o jogo preenche */
[data-game-people] .game-person-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
[data-game-people] li > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
[data-game-people] li > small { margin-left: auto; color: var(--muted); font-size: .68rem; white-space: nowrap; }
[data-game-people] .game-person-more { color: var(--muted); }

@keyframes game-pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes game-blink { 50% { opacity: .45; } }

/* palco estreito (celular em tela cheia ou tablet pequeno) */
@media (max-width: 640px) {
  .game-chip, .game-stage.is-full .game-chip { top: 54px; max-width: calc(100% - 24px); }
  .game-tools { gap: 5px; }
  .game-chat, .game-hud:has(.game-mini[hidden]) .game-chat { width: calc(100% - 24px); }
  .game-mini { bottom: 60px; width: 140px; height: 108px; }
  .game-card, .game-perf-panel { top: 96px; }
  /* com a pílula de desempenho as ferramentas quebram em duas linhas: sala, cartão e painéis descem */
  .game-hud.has-perf .game-chip, .game-stage.is-full .game-hud.has-perf .game-chip { top: 96px; max-width: calc(100% - 24px); }
  .game-hud.has-perf .game-card, .game-hud.has-perf .game-perf-panel, .game-hud.has-perf .game-panel { top: 138px; }
  .game-panel { top: 96px; right: 12px; bottom: 60px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .game-card, .game-panel, .game-toast, .game-bubble { animation: none; }
  .game-chip.is-wait .game-dot { animation: none; }
}