* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: #0b0b0d;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   BOOT LOADER — fluido (barra na GPU, 0�?'100)
*/
#boot-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: #0b0b0d;
  color: #fff;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s ease, visibility 0.5s;
}
/* saída suave: fade longo do fundo + conteúdo flutua e esvanece junto */
#boot-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
#boot-loader.is-done .boot-stage {
  opacity: 0;
  transform: translateY(-14px) scale(1.03);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
#boot-loader .boot-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(240px, 78vw);
  text-align: center;
}
#boot-loader .boot-mark {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
}
/* círculo estático do monograma (a ÚNICA animação de progresso é a barra) */
#boot-loader .boot-mark .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
#boot-loader .boot-logo {
  width: 36px;
  height: 36px;
  opacity: 0.95;
  overflow: visible;
}
#boot-loader .boot-logo .mg-m {
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#boot-loader .boot-brand {
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 6px;
}
#boot-loader .boot-tag {
  font: 400 10px/1 system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  margin-bottom: 22px;
}
#boot-loader .boot-pct {
  font: 500 28px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 16px;
  min-width: 4ch;
}
#boot-loader .boot-pct span {
  font-size: 0.55em;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 1px;
  vertical-align: super;
}
#boot-loader .boot-bar {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
/* barra: transform na GPU (continua mesmo com main thread ocupado) */
#boot-loader .boot-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  animation: bootBar10s 10s linear forwards;
}
@keyframes bootBar10s {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
#boot-loader.is-done .boot-bar-fill {
  animation: none;
  transform: scaleX(1);
}
#boot-loader .boot-status {
  margin-top: 14px;
  font: 400 10px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}
#boot-loader .boot-url {
  position: absolute;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  font: 400 11px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.22);
}

canvas {
  display: block;
  position: fixed;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
  outline: none;
  /* nunca “pixel art” — interpolação suave no upscale do canvas */
  image-rendering: auto;
  image-rendering: smooth;
  z-index: 0;
  background: transparent;
}
/* mira sem Pointer Lock: esconde cursor do SO (sem banner Esc do browser) */
html.aiming-cursor,
html.aiming-cursor * {
  cursor: none !important;
}
#hint {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.4);
  font: 13px/1.4 system-ui, sans-serif;
  pointer-events: none;
  user-select: none;
  z-index: 10;
}
body.game-mode #hint { display: none; }
/* �"?�"? menu lateral: transparente, só linhas �"?�"? */
#play-menu {
  position: fixed;
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
  z-index: 30;
  width: 168px;
  pointer-events: auto;
  user-select: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#play-menu .panel {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#play-menu .hud-top,
#play-menu .play-ring,
#play-menu .play-ring-2,
#play-menu .hud-footer {
  display: none;
}
#play-menu .menu-label {
  display: none;
}
#play-menu .play-main {
  display: flex;
  justify-content: flex-start;
  padding: 4px 0 14px;
}
/* wrapper: anel de progresso �? a borda do botão */
#play-menu .play-btn-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
#play-menu .play-btn-wrap .play-progress {
  position: absolute;
  inset: 0;
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
#play-menu .play-btn-wrap .play-progress-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 3;
}
#play-menu .play-btn-wrap .play-progress-fill {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  /* r=24.5 �?' C �?^ 153.938 */
  stroke-dasharray: 153.938;
  stroke-dashoffset: 153.938;
  transition: stroke-dashoffset 0.05s linear;
}
#play-menu .play-btn-wrap.is-playing .play-progress-track {
  stroke: rgba(255, 255, 255, 0.22);
}
#play-menu #btn-play {
  position: absolute;
  inset: 4px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  transition: transform 0.15s ease, color 0.15s ease, opacity 0.15s ease, background 0.15s ease;
  opacity: 0.9;
  z-index: 1;
}
#play-menu #btn-play:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.04);
}
#play-menu #btn-play:active {
  transform: scale(0.96);
}
#play-menu .play-btn-wrap.is-playing #btn-play {
  opacity: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
#play-menu #btn-play > svg.play-icon {
  width: 20px;
  height: 20px;
  margin-left: 2px;
  overflow: visible;
}
#play-menu .play-btn-wrap.is-playing #btn-play > svg.play-icon {
  margin-left: 0;
}
#play-menu #btn-play svg .play-tri {
  fill: currentColor;
}
#play-menu .menu-status {
  font: 400 11px/1.35 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.35);
  text-align: left;
  min-height: 1.2em;
  padding: 0 2px 12px;
}
#play-menu .menu-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 0 0;
  border: none;
}
#play-menu .menu-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#play-menu .menu-items button {
  appearance: none;
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font: 500 13px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.04em;
  padding: 14px 4px;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color 0.15s ease, opacity 0.15s ease;
}
#play-menu .menu-items button:last-child {
  border-bottom: none;
}
#play-menu .menu-items button .mi {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
#play-menu .menu-items button .mi svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#play-menu .menu-items button .mi svg.filled {
  fill: currentColor;
  stroke: none;
}
#play-menu .menu-items button .lbl {
  flex: 1;
}
#play-menu .menu-items button:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
}
#play-menu .menu-items button:hover .mi {
  opacity: 1;
}
#play-menu .menu-items button.active {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.18) !important; /* só o separador, sem �?ocaixa�?� */
  box-shadow: none !important;
  color: #fff;
}
#play-menu .menu-items button.active .mi {
  opacity: 1;
  background: transparent !important;
  box-shadow: none !important;
}
#play-menu .menu-items button:disabled {
  opacity: 0.3;
  cursor: wait;
}
#caption {
  position: fixed;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  font: 500 14px/1.4 system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.0);
  transition: color .45s ease;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}
#caption.show { color: rgba(255,255,255,0.72); }
/* com seletor de modelo aberto, o nome fica só no picker */
body:has(#bow-picker.show) #caption,
body:has(#arrow-picker.show) #caption,
body:has(#quiver-picker.show) #caption {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* seletor de modelo de arco (vitrine) */
#bow-picker {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(8px);
  z-index: 32;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  font-family: system-ui, -apple-system, sans-serif;
}
#bow-picker.show {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#bow-picker button {
  appearance: none;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: color 0.15s, transform 0.12s, opacity 0.15s;
}
#bow-picker button:hover {
  color: #fff;
  transform: scale(1.08);
}
#bow-picker button:active {
  transform: scale(0.94);
  opacity: 0.8;
}
#bow-picker button svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#bow-picker .bp-meta {
  min-width: 140px;
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  user-select: none;
}
#bow-picker .bp-name {
  font: 600 13px/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#bow-picker .bp-idx {
  margin-top: 5px;
  font: 500 11px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
}
body.game-mode #bow-picker,
body.game-mode #arrow-picker,
body.game-mode #quiver-picker,
body.cinematic #bow-picker,
body.cinematic #arrow-picker,
body.cinematic #quiver-picker {
  display: none !important;
}

/* ?? ficha t�cnica - ao lado do seletor (embaixo), limpa e organizada ?? */
#gear-spec {
  position: fixed;
  left: calc(50% - 380px);
  right: auto;
  top: auto;
  bottom: 88px;
  transform: translateX(-8px);
  z-index: 33;
  width: min(228px, 24vw);
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
  text-align: right;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
#gear-spec.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* cabe�alho: nome em destaque, tier discreto acima */
#gear-spec .gs-head {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin: 0 0 10px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
#gear-spec .gs-tier {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0;
  border: none;
  border-radius: 0;
  color: var(--gs-accent, #c8cdd4);
  background: none;
  white-space: nowrap;
  opacity: 0.95;
}
#gear-spec .gs-name {
  font: 600 15px/1.15 system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
#gear-spec .gs-desc {
  font: 400 11.5px/1.5 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.58);
  margin: 0 0 14px;
  max-width: 220px;
  margin-left: auto;
}

/* atributos */
#gear-spec .gs-bars {
  display: grid;
  gap: 11px;
}
#gear-spec .gs-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}
#gear-spec .gs-meta {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
}
#gear-spec .gs-label {
  font: 500 10px/1 system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  text-align: right;
}
#gear-spec .gs-val {
  font: 600 11px/1 "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
  min-width: 1.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#gear-spec .gs-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-left: auto;
  width: 100%;
  max-width: 180px;
}
#gear-spec .gs-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.45),
    var(--gs-accent, #e8eaee)
  );
  width: 0;
  margin-left: 0;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: none;
}

body.game-mode #gear-spec,
body.cinematic #gear-spec {
  display: none !important;
}
body.is-mobile #gear-spec {
  left: 10px;
  right: auto;
  top: auto;
  bottom: max(72px, calc(env(safe-area-inset-bottom) + 56px));
  width: min(150px, 38vw);
  transform: translateX(-6px);
}
body.is-mobile #gear-spec.show {
  transform: translateX(0);
}
body.is-mobile #gear-spec .gs-name {
  font-size: 12px;
}
body.is-mobile #gear-spec .gs-desc {
  font-size: 10px;
  margin-bottom: 10px;
}
body.is-mobile #bow-picker,
body.is-mobile #arrow-picker,
body.is-mobile #quiver-picker {
  bottom: max(72px, calc(env(safe-area-inset-bottom) + 56px));
  gap: 10px;
}
body.is-mobile #bow-picker button,
body.is-mobile #arrow-picker button,
body.is-mobile #quiver-picker button {
  width: 48px;
  height: 48px;
}
body.is-mobile #bow-picker .bp-name,
body.is-mobile #arrow-picker .bp-name,
body.is-mobile #quiver-picker .bp-name {
  font-size: 12px;
}
/* seletores de flecha / aljava — mesmo visual do arco */
#arrow-picker,
#quiver-picker {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(8px);
  z-index: 32;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  font-family: system-ui, -apple-system, sans-serif;
}
#arrow-picker.show,
#quiver-picker.show {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#arrow-picker button,
#quiver-picker button {
  appearance: none;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: color 0.15s, transform 0.12s, opacity 0.15s;
}
#arrow-picker button:hover,
#quiver-picker button:hover { color: #fff; transform: scale(1.08); }
#arrow-picker button:active,
#quiver-picker button:active { transform: scale(0.94); opacity: 0.8; }
#arrow-picker button svg,
#quiver-picker button svg {
  width: 22px; height: 22px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
#arrow-picker .bp-meta,
#quiver-picker .bp-meta {
  min-width: 140px; text-align: center;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  user-select: none;
}
#arrow-picker .bp-name,
#quiver-picker .bp-name {
  font: 600 13px/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
}
#arrow-picker .bp-idx,
#quiver-picker .bp-idx {
  margin-top: 5px;
  font: 500 11px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
}

/* �"?�"? botão Jogar (vitrine · desktop): CTA sob o menu, esq. inferior �"?�"? */
#btn-game {
  position: fixed;
  top: auto;
  right: auto;
  left: 22px; /* alinhado ao #play-menu */
  bottom: 28px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 168px; /* mesma largura visual do menu */
  padding: 16px 24px 16px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: 700 15px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    opacity 0.45s ease,
    transform 0.2s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    text-shadow 0.2s ease;
}
#btn-game:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px) scale(1.03);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.35), 0 1px 12px rgba(0, 0, 0, 0.45);
}
#btn-game:active {
  transform: translateY(0) scale(0.98);
  opacity: 0.9;
}
#btn-game .btn-game-ico {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));
}
#btn-game .btn-game-ico .ico-arrow-shaft {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
#btn-game .btn-game-ico .ico-arrow-head {
  fill: currentColor;
}
#btn-game .btn-game-ico .ico-arrow-fletch {
  fill: currentColor;
  opacity: 0.9;
}
#btn-game:hover .btn-game-ico {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.55));
}
#btn-game.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94) translateY(8px);
}

/* crédito site — mesma linha do Jogar, canto inferior direito */
#site-credit {
  position: fixed;
  left: auto;
  right: 22px;
  bottom: 28px;
  z-index: 40;
  color: rgba(255, 255, 255, 0.55);
  font: 500 12px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  user-select: none;
  pointer-events: auto;
  transition: opacity 0.45s ease, color 0.15s ease, transform 0.2s ease;
}
#site-credit:hover {
  color: rgba(255, 255, 255, 0.92);
}
body.game-mode #site-credit,
#btn-game.hidden ~ #site-credit {
  opacity: 0;
  pointer-events: none;
}
body.is-mobile #site-credit {
  display: none;
}

/* �"?�"? atalhos de fase (vitrine · rail direito) �"?�"? */
/* �"?�"? cabeçalho: Entrar (esq) · Ranking (dir) · linha ponta a ponta �"?�"? */
#top-user-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s;
}
#top-user-bar .tub-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* espaço generoso pra Conta/Ranking; linha fica bem abaixo */
  padding: 18px 22px 40px;
  box-sizing: border-box;
  pointer-events: none;
}
#top-user-bar .tub-inner > * {
  pointer-events: auto;
}
/* linha original full-width (como antes) + Online só no meio: ----( �YO� )---- */
#top-user-bar .tub-line-row {
  position: relative;
  width: 100%;
  height: 1px;
  pointer-events: none;
  z-index: 1;
}
#top-user-bar .tub-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 1px;
  margin: 0;
  display: block;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 0;
}

/* �"?�"? Online (orbe no meio da linha; label abaixo) �"?�"? */
.tub-online-wrap {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  /* sobe metade do orbe (36px) para o centro do círculo cair na linha */
  margin-top: -18px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
  padding: 0 16px;
}
#btn-online {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.15s ease, opacity 0.15s;
}
#btn-online:hover {
  color: #fff;
}
#btn-online .tub-orb {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  /* fundo opaco corta a linha no meio: ----(  )---- */
  background: #0c0e12;
  box-shadow:
    0 0 0 6px rgba(8, 10, 14, 0.95),
    0 4px 14px rgba(0, 0, 0, 0.4),
    inset 0 0 12px rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
#btn-online:hover .tub-orb {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 0 6px rgba(8, 10, 14, 0.97),
    0 0 18px rgba(255, 255, 255, 0.12),
    inset 0 0 14px rgba(255, 255, 255, 0.08);
}
/* VS — jogar contra: brilho varre as letras + anel pulsando ao redor */
.tub-vs {
  font: 900 12.5px/1 system-ui, -apple-system, sans-serif;
  font-style: italic;
  letter-spacing: 0.04em;
  padding-right: 1px; /* compensa o itálico no círculo */
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.55) 38%,
    #fff 50%,
    rgba(255, 255, 255, 0.55) 62%,
    rgba(255, 255, 255, 0.55) 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tub-vs-shine 2.8s ease-in-out infinite;
}
@keyframes tub-vs-shine {
  0% { background-position: 130% 0; }
  55%, 100% { background-position: -60% 0; }
}
/* anel de destaque expandindo (fora do orb, que tem overflow hidden) */
#btn-online {
  position: relative;
}
#btn-online::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  /* o reset `* { box-sizing }` não pega ::after — sem isto a borda
     soma 2px à caixa e o anel fica 1px fora do centro */
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: tub-vs-ring 2.8s ease-out infinite;
}
@keyframes tub-vs-ring {
  0%, 24% { opacity: 0; transform: scale(1); }
  32% { opacity: 0.65; }
  70%, 100% { opacity: 0; transform: scale(1.6); }
}
.tub-online-label {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  user-select: none;
  transition: color 0.15s;
  margin-top: 1px;
}
.tub-online-wrap:hover .tub-online-label {
  color: rgba(255, 255, 255, 0.9);
}
body.is-mobile #btn-online .tub-orb {
  width: 34px;
  height: 34px;
}
body.is-mobile .tub-online-wrap {
  margin-top: -17px;
}
body.is-mobile .tub-vs {
  font-size: 11.5px;
}
body.is-mobile #btn-online::after {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
}
body.is-mobile .tub-online-label {
  font-size: 9px;
  letter-spacing: 0.16em;
}

/* �"?�"? Modal Online / Duelo — design limpo �"?�"? */
#online-overlay {
  position: fixed;
  inset: 0;
  z-index: 205;
  display: grid;
  place-items: center;
  padding: 18px;
  /* fundo ESCURO, 87% transparente (alpha 0.13) + embaçado suave */
  background: rgba(6, 8, 12, 0.13);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s;
}
#online-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.online-panel {
  width: min(420px, calc(100vw - 32px));
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(165deg, #161922 0%, #0c0e14 100%);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.7);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.online-panel::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #ff5a7a, #ffd56a, #5aa8ff);
}
.online-panel .op-head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px 6px;
}
.online-panel .op-head h2 {
  margin: 0;
  font: 800 13px/1 system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.online-panel .op-close {
  display: none !important;
}
.online-panel .op-body {
  padding: 10px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
}
.online-panel .op-globe-lg,
.online-panel .op-idle,
.online-panel .op-copy,
.online-panel .op-rules {
  display: none !important;
}

/* arena VS — sem borda; laterais em degradê transparente */
.online-panel .op-vs {
  display: grid !important;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 22px 16px 18px;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 80, 120, 0.06) 18%,
      rgba(0, 0, 0, 0.22) 38%,
      rgba(0, 0, 0, 0.22) 62%,
      rgba(80, 140, 255, 0.06) 82%,
      transparent 100%
    );
  overflow: visible;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}
.online-panel .op-fighter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.online-panel .op-fighter .av {
  width: 84px;
  height: 84px;
  min-width: 84px;
  min-height: 84px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  background: #0a0c12;
  overflow: hidden;
  isolation: isolate;
  flex: 0 0 auto;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: border-color 0.3s, transform 0.25s, box-shadow 0.25s;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.online-panel #online-me .av {
  border-color: #ff7a96;
  box-shadow: 0 0 0 1px rgba(255, 120, 150, 0.25), 0 8px 28px rgba(0, 0, 0, 0.45);
}
.online-panel #online-opp .av {
  border-color: rgba(255, 255, 255, 0.2);
}
.online-panel .op-fighter .av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.online-panel .op-fighter .nm {
  font: 700 14px/1.2 system-ui, sans-serif;
  color: #fff;
  width: 100%;
  max-width: 8em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.online-panel .op-fighter .rk {
  font: 800 12px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: #f0d78c;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  box-shadow: none;
  white-space: nowrap;
  min-width: 0;
  text-align: center;
  box-sizing: border-box;
}
.online-panel .op-vs-mid {
  display: grid;
  place-items: center;
  font: 900 14px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.28);
  user-select: none;
}

/* �"?�"? Roleta tipo slot (reel vertical) �"?�"? */
.online-panel .op-av-stage {
  position: relative;
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
}
.online-panel .op-av-stage > .av {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.online-panel .op-reel {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  overflow: hidden;
  display: none;
  border: 3px solid rgba(240, 215, 140, 0.75);
  box-shadow:
    0 0 0 2px rgba(240, 215, 140, 0.2),
    0 8px 28px rgba(0, 0, 0, 0.45),
    inset 0 0 20px rgba(0, 0, 0, 0.35);
  background: #0a0c12;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.online-panel.is-searching .op-reel {
  display: block;
}
.online-panel.is-searching #online-opp-av {
  visibility: hidden;
}
.online-panel .op-reel-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.online-panel .op-reel-cell {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  overflow: hidden;
  background: #0a0c12;
}
.online-panel .op-reel-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* vinheta do reel (foco no centro) */
.online-panel.is-searching .op-reel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    transparent 28%,
    transparent 72%,
    rgba(0, 0, 0, 0.45) 100%
  );
}
.online-panel.is-searching .op-reel.is-blur .op-reel-strip {
  filter: blur(1.2px);
}
.online-panel.is-searching #online-opp .nm {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease, opacity 0.2s ease;
}
.online-panel.is-searching #online-opp .rk {
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.online-panel.is-searching .op-vs-mid {
  color: rgba(240, 215, 140, 0.7);
}
.online-panel.is-searching #online-opp .nm.is-spinning,
.online-panel.is-searching #online-opp .rk.is-spinning {
  opacity: 0.35;
  filter: blur(0.5px);
}

/* travou oponente */
.online-panel.is-matched #online-opp-av {
  visibility: visible;
  border-color: #6eb6ff;
  box-shadow: 0 0 0 2px rgba(110, 182, 255, 0.35), 0 10px 32px rgba(40, 100, 200, 0.35);
  animation: op-opp-lock 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
.online-panel.is-matched .op-reel {
  display: none !important;
}
.online-panel.is-matched .op-vs-mid {
  color: rgba(255, 255, 255, 0.55);
}
.online-panel.is-matched #online-opp .nm {
  color: #fff;
  opacity: 1;
  filter: none;
}
.online-panel.is-matched #online-opp .rk {
  opacity: 1;
  filter: none;
}
@keyframes op-opp-lock {
  0% { transform: scale(1.14); filter: brightness(1.3); }
  50% { transform: scale(0.97); }
  100% { transform: scale(1); filter: brightness(1); }
}

.online-panel .op-status {
  min-height: 18px;
  margin: -6px 0 0;
  font: 600 12px/1.3 system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
}
.online-panel .op-status:empty { min-height: 0; margin: 0; }
.online-panel .op-status.is-err { color: #fda4af; }
.online-panel .op-status.is-ok { color: #6ee7b7; }

.online-panel .op-invite {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 220, 120, 0.22);
  background: rgba(255, 200, 80, 0.07);
  text-align: center;
}
.online-panel .op-invite[hidden] { display: none !important; }
.online-panel .op-invite-txt {
  margin: 0 0 10px;
  font: 600 12px/1.35 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.online-panel .op-invite-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.online-panel .op-invite-actions button {
  flex: 1;
  max-width: 140px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.online-panel .op-invite-actions button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
.online-panel .op-invite-actions .op-ghost {
  border-color: transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
}

.online-panel .op-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.online-panel .op-actions button {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s, border-color 0.15s, opacity 0.15s;
}
.online-panel .op-actions button:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.online-panel .op-actions button:active:not(:disabled) {
  transform: translateY(0);
}
.online-panel .op-actions button:disabled {
  opacity: 0.35;
  cursor: default;
}
.online-panel .op-actions #online-find-btn {
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid #ffffff;
  box-shadow: none;
  color: #ffffff;
}
.online-panel .op-actions #online-find-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: #ffffff;
  box-shadow: none;
}
.online-panel .op-actions #online-fight-btn {
  background: linear-gradient(180deg, #3d8bfd, #1a5fd4);
  border-color: rgba(120, 180, 255, 0.35);
  box-shadow: 0 8px 24px rgba(30, 90, 200, 0.35);
}
.online-panel .op-actions #online-fight-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #5a9fff, #2468e0);
}
.online-panel .op-actions .op-ghost {
  background: transparent;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.1em;
  box-shadow: none;
  padding: 10px;
}
.online-panel .op-actions .op-ghost:hover:not(:disabled) {
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border-color: transparent;
  transform: none;
}
.online-panel.is-searching #online-find-btn {
  opacity: 0.5;
}

/* �"?�"? Arcade Online: intro VS + placar de duelo �"?�"? */
#arcade-intro {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 40, 80, 0.18), transparent 55%),
    radial-gradient(ellipse at 50% 70%, rgba(40, 120, 255, 0.16), transparent 50%),
    rgba(2, 4, 10, 0.92);
  transition: opacity 0.35s ease, visibility 0.35s;
}
#arcade-intro.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#arcade-intro .ai-stage {
  position: relative;
  width: min(920px, 94vw);
  height: min(340px, 48vh);
  display: flex;
  align-items: center;
  justify-content: center;
}
#arcade-intro .ai-fighter {
  position: absolute;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 160px;
  transition: transform 1.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}
#arcade-intro .ai-fighter.me {
  left: 8%;
  transform: translate(-140%, -50%) rotate(-8deg);
  opacity: 0;
}
#arcade-intro .ai-fighter.opp {
  right: 8%;
  left: auto;
  transform: translate(140%, -50%) rotate(8deg);
  opacity: 0;
}
#arcade-intro.show.in .ai-fighter.me {
  transform: translate(0, -50%) rotate(-3deg);
  opacity: 1;
}
#arcade-intro.show.in .ai-fighter.opp {
  transform: translate(0, -50%) rotate(3deg);
  opacity: 1;
}
#arcade-intro .ai-av {
  width: 110px;
  height: 110px;
  min-width: 110px;
  min-height: 110px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  background: #0c0e14;
  display: grid;
  place-items: center;
  font-size: 48px;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
#arcade-intro .ai-fighter.me .ai-av {
  border-color: rgba(255, 120, 150, 0.95);
}
#arcade-intro .ai-fighter.opp .ai-av {
  border-color: rgba(120, 180, 255, 0.95);
}
#arcade-intro .ai-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
#arcade-intro .ai-nick {
  font: 800 18px/1.1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  max-width: min(140px, 28vw);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
#arcade-intro .ai-rk {
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: 0.18em;
  color: rgba(255, 220, 120, 0.9);
}
#arcade-intro .ai-vs {
  position: relative;
  z-index: 2;
  font: 900 72px/1 Impact, Haettenschweiler, 'Arial Black', sans-serif;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow:
    0 0 24px rgba(255, 40, 80, 0.7),
    0 4px 0 #c4122e,
    0 8px 20px rgba(0, 0, 0, 0.5);
  transform: scale(0.2) rotate(-12deg);
  opacity: 0;
  transition: transform 1.05s cubic-bezier(0.34, 1.35, 0.64, 1) 0.15s, opacity 0.55s ease 0.1s;
}
#arcade-intro.show.in .ai-vs {
  transform: scale(1) rotate(-6deg);
  opacity: 1;
}
#arcade-intro .ai-tag {
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  font: 800 13px/1 system-ui, sans-serif;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transition: opacity 0.7s ease 0.55s;
}
#arcade-intro.show.in .ai-tag { opacity: 1; }
#arcade-intro .ai-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
#arcade-intro.flash .ai-flash {
  animation: ai-flash 0.75s ease-out;
}
@keyframes ai-flash {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   DUELO STATUS — esquerdo · 1 linha · placar | vento ao lado
   sem caixa · avatares redondos · nada cortado
   �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */
#duel-hud {
  position: fixed;
  top: 12px;
  left: 14px;
  right: auto;
  transform: none;
  z-index: 55;
  display: none;
  pointer-events: none !important;
  /* sobra espaço p/ botões à direita; padding evita sombra/anel cortados */
  max-width: calc(100vw - 100px);
  padding: 6px 8px 6px 4px;
  box-sizing: border-box;
  overflow: visible;
  background: none;
  border: none;
  box-shadow: none;
}
body.duel-mode #duel-hud { display: block; }

body.duel-mode #game-hud .phase-info .tag,
body.duel-mode #game-hud .phase-info .title,
body.duel-mode #game-hud .match-time,
body.duel-mode #game-hud #goal-meter,
body.duel-mode #game-hud .stats {
  display: none !important;
}
body.duel-mode #game-hud .phase-info {
  margin: 0;
  padding: 0 !important;
  width: 0;
  height: 0;
  overflow: visible;
  min-height: 0;
}
body.duel-mode #game-hud .title-row > #wind-readout {
  display: none !important;
}
body.duel-mode #game-hud,
body.duel-mode #game-opts,
body.duel-mode #game-opts button,
body.duel-mode #btn-exit-game {
  z-index: 60;
}
body.duel-mode #game-opts {
  position: relative;
  pointer-events: auto !important;
}

/* uma única linha: [placar] | [vento] */
#duel-hud .dh-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: 100%;
  overflow: visible;
  background: none;
  border: none;
}

#duel-hud .dh-status {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}

#duel-hud .dh-side {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  overflow: visible;
  transition: opacity 0.2s ease;
}
#duel-hud .dh-side.opp {
  flex-direction: row-reverse;
  text-align: right;
}
#duel-hud .dh-side.is-dim { opacity: 0.5; }
#duel-hud .dh-side.is-active { opacity: 1; }

/* avatares 100% redondos — sem sombra */
#duel-hud .dh-av {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  background: #111318;
  border: 2px solid #ffffff;
  box-sizing: border-box;
  box-shadow: none;
  filter: none;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
#duel-hud .dh-side.me .dh-av { border-color: #ff8ca0; }
#duel-hud .dh-side.opp .dh-av { border-color: #8cb9ff; }
#duel-hud .dh-side.is-active .dh-av {
  border-color: #ffe66a;
  box-shadow: none;
}
#duel-hud .dh-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

#duel-hud .dh-info {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  background: none;
}
#duel-hud .dh-side.opp .dh-info { align-items: flex-end; }

/* texto sólido — ZERO text-shadow / box-shadow */
#duel-hud .dh-pts,
#duel-hud .dh-vs,
#duel-hud .dh-round,
#duel-hud .dh-dist,
#duel-hud .dh-wind > #wind-readout .wind-label,
#duel-hud .dh-wind > #wind-readout .wind-val {
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: none !important;
  background-color: transparent !important;
}

/* nicks ocultos no duelo — só avatar + pontos */
#duel-hud .dh-nick {
  display: none !important;
}
#duel-hud .dh-pts {
  display: block;
  font: 800 22px/1 system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: visible;
  border: none !important;
  border-radius: 0 !important;
  padding: 0;
  margin: 0;
}
#duel-hud .dh-pts.pop { color: #ffe566; }

#duel-hud .dh-mid {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 6px;
  min-width: 48px;
  overflow: visible;
  background: none;
}
#duel-hud .dh-vs {
  font: 800 9px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: #a0a4b0;
}
#duel-hud .dh-round {
  font: 700 14px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  white-space: nowrap;
}
#duel-hud .dh-dist {
  font: 600 11px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #c8ccd6;
  white-space: nowrap;
}

/* divisor entre placar e vento */
#duel-hud .dh-div {
  flex: 0 0 1px;
  align-self: stretch;
  width: 1px;
  min-height: 36px;
  margin: 2px 2px;
  background: #6a7080;
  box-shadow: none;
}
#duel-hud:not(:has(#wind-readout.show)) .dh-div {
  display: none;
}
#duel-hud:not(:has(#wind-readout.show)) .dh-wind {
  display: none;
}

/* �"?�"? VENTO AO LADO — cores sólidas, sem sombra �"?�"? */
#duel-hud .dh-wind {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  overflow: visible;
}
#duel-hud .dh-wind:empty { display: none; }
#duel-hud .dh-wind > #wind-readout {
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: none !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  color: #e0d8ff;
  overflow: visible;
  white-space: nowrap;
}
#duel-hud .dh-wind > #wind-readout.show {
  display: inline-flex;
}
#duel-hud .dh-wind > #wind-readout .wind-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 18px;
  color: #b8a8ff;
  filter: none !important;
}
#duel-hud .dh-wind > #wind-readout .wind-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#duel-hud .dh-wind > #wind-readout .wind-arrow {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 16px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  color: #ffffff;
  filter: none !important;
  transform-origin: center center;
}
#duel-hud .dh-wind > #wind-readout .wind-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#duel-hud .dh-wind > #wind-readout .wind-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible;
  background: none;
}
#duel-hud .dh-wind > #wind-readout .wind-label {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8a8ff;
  white-space: nowrap;
}
#duel-hud .dh-wind > #wind-readout .wind-val {
  font: 700 13px/1.1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  white-space: nowrap;
  overflow: visible;
}
#duel-hud .dh-wind > #wind-readout[data-force="leve"] .wind-val { color: #6ee7b7; }
#duel-hud .dh-wind > #wind-readout[data-force="moderado"] .wind-val { color: #e0d8ff; }
#duel-hud .dh-wind > #wind-readout[data-force="forte"] .wind-val { color: #ffd28a; }
#duel-hud .dh-wind > #wind-readout[data-force="intenso"] .wind-val { color: #ff8a8a; }
#duel-hud .dh-wind > #wind-readout[data-force="forte"] .wind-icon,
#duel-hud .dh-wind > #wind-readout[data-force="intenso"] .wind-icon {
  color: #ffc878;
}

body.is-mobile #duel-hud {
  top: 8px;
  left: 10px;
  max-width: calc(100vw - 76px);
  padding: 4px 6px 4px 2px;
}
body.is-mobile #duel-hud .dh-row { gap: 10px; }
body.is-mobile #duel-hud .dh-status { gap: 8px; }
body.is-mobile #duel-hud .dh-av {
  flex-basis: 38px;
  width: 38px;
  height: 38px;
  font-size: 16px;
}
body.is-mobile #duel-hud .dh-pts { font-size: 18px; }
body.is-mobile #duel-hud .dh-mid { min-width: 42px; padding: 0 4px; gap: 3px; }
body.is-mobile #duel-hud .dh-round { font-size: 12px; }
body.is-mobile #duel-hud .dh-wind > #wind-readout { gap: 5px; }
body.is-mobile #duel-hud .dh-wind > #wind-readout .wind-val { font-size: 12px; }

body.duel-mode.is-mobile #game-hud .phase-info,
body.is-mobile.duel-mode #game-hud .phase-info {
  padding-left: 0 !important;
  width: 0;
  height: 0;
}

body.is-mobile #arcade-intro .ai-av { width: 84px; height: 84px; font-size: 36px; }
body.is-mobile #arcade-intro .ai-vs { font-size: 48px; }

/* ── Status do duelo: 1 linha fina · sem caixa · não cobre o alvo ── */
#duel-hud .dh-narr {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  max-width: min(380px, calc(100vw - 110px));
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  opacity: 0.92;
}
#duel-hud .dh-narr[hidden] {
  display: none !important;
}
#duel-hud .dh-narr .dn-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  flex: 0 0 auto;
}
#duel-hud .dh-narr .dn-clock {
  font: 600 11px/1 ui-monospace, 'Cascadia Code', Consolas, monospace;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
  flex: 0 0 auto;
  min-width: 2.6em;
}
#duel-hud .dh-narr.is-urgent .dn-clock {
  color: rgba(255, 150, 150, 0.95);
}
#duel-hud .dh-narr .dn-phase {
  font: 600 10px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 205, 255, 0.7);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  flex: 0 0 auto;
  white-space: nowrap;
}
#duel-hud .dh-narr.is-me .dn-phase {
  color: rgba(255, 185, 200, 0.75);
}
#duel-hud .dh-narr.is-hot .dn-phase {
  color: rgba(255, 220, 140, 0.85);
}
#duel-hud .dh-narr.is-urgent .dn-phase {
  color: rgba(255, 140, 140, 0.9);
}
#duel-hud .dh-narr .dn-line {
  font: 500 12px/1.2 system-ui, sans-serif;
  color: rgba(240, 244, 255, 0.78);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
/* sub e barra escondidos no visual minimal */
#duel-hud .dh-narr .dn-sub,
#duel-hud .dh-narr #dn-bar-fill {
  display: none !important;
}
body.is-mobile #duel-hud .dh-narr {
  max-width: min(300px, calc(100vw - 80px));
  gap: 5px;
}
body.is-mobile #duel-hud .dh-narr .dn-line {
  font-size: 11px;
}
body.is-mobile #duel-hud .dh-narr .dn-phase {
  font-size: 9px;
  letter-spacing: 0.08em;
}
body.is-mobile #duel-hud .dh-narr .dn-clock {
  font-size: 10px;
}

#duel-banner {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 50;
  pointer-events: none !important;
  opacity: 0;
  text-align: center;
}
#duel-banner.show {
  animation: duel-banner-in 2.4s cubic-bezier(0.2, 1.05, 0.3, 1) forwards;
}
#duel-banner .db-kicker {
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}
#duel-banner .db-title {
  font: 800 28px/1.05 system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
#duel-banner.me .db-title { color: #ffb3c4; }
#duel-banner.opp .db-title { color: #a8d0ff; }
#duel-banner .db-sub {
  margin-top: 8px;
  font: 600 14px/1 system-ui, sans-serif;
  color: rgba(255, 230, 140, 0.9);
}
@keyframes duel-banner-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -40%) scale(1); }
}

/* �"?�"? Troca de turno: só o perfil de quem VAI jogar (grande) �"?�"? */
#turn-swap {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(12, 14, 22, 0.4), transparent 58%),
    rgba(4, 6, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.55s ease, visibility 0.55s;
}
#turn-swap.show {
  opacity: 1;
  visibility: visible;
}
#turn-swap .ts-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: min(420px, 90vw);
}
/* esconde o �?oout�?� — só um perfil na transição */
#turn-swap .ts-fighter.out {
  display: none !important;
}
#turn-swap .ts-fighter.in {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: auto;
  transform: scale(0.55);
  opacity: 0;
  filter: blur(8px);
  transition:
    transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.9s ease,
    filter 0.9s ease;
}
#turn-swap.show.phase-out .ts-fighter.in {
  transform: scale(0.78);
  opacity: 0.55;
  filter: blur(3px);
}
#turn-swap.show.phase-in .ts-fighter.in {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
  transition-timing-function: cubic-bezier(0.34, 1.25, 0.64, 1), ease, ease;
}
#turn-swap .ts-av {
  width: min(200px, 42vw);
  height: min(200px, 42vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.65);
  display: grid;
  place-items: center;
  font-size: clamp(56px, 14vw, 88px);
  line-height: 1;
  background: #0c0e14;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  transition: border-color 0.4s;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
#turn-swap.show.phase-in .ts-fighter.in .ts-av {
  animation: ts-av-pop 1.15s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
@keyframes ts-av-pop {
  0% { transform: scale(0.88); }
  55% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
#turn-swap .ts-fighter.me .ts-av {
  border-color: rgba(255, 140, 170, 0.95);
}
#turn-swap .ts-fighter.opp .ts-av {
  border-color: rgba(140, 190, 255, 0.95);
}
#turn-swap .ts-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
#turn-swap .ts-nick {
  font: 800 20px/1.15 system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.55);
  max-width: min(260px, 72vw);
  width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease 0.28s, transform 0.8s ease 0.22s;
}
#turn-swap.show.phase-in .ts-nick {
  opacity: 1;
  transform: translateY(0);
}
#turn-swap .ts-tag {
  font: 800 13px/1 system-ui, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 230, 140, 0.92);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease 0.35s, transform 0.8s ease 0.3s;
  white-space: nowrap;
}
#turn-swap.show.phase-out .ts-tag {
  opacity: 0.4;
}
#turn-swap.show.phase-in .ts-tag {
  opacity: 1;
  transform: translateY(0);
}
#turn-swap .ts-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.5), transparent 50%);
  opacity: 0;
  pointer-events: none;
}
#turn-swap.flash .ts-flash {
  animation: ts-flash 0.85s ease-out;
}
@keyframes ts-flash {
  0% { opacity: 0.45; }
  100% { opacity: 0; }
}
body.is-mobile #turn-swap .ts-av {
  width: min(160px, 48vw);
  height: min(160px, 48vw);
  font-size: clamp(48px, 16vw, 72px);
  border-width: 3px;
}
body.is-mobile #turn-swap .ts-nick { font-size: 17px; }
body.is-mobile #turn-swap .ts-tag { font-size: 11px; letter-spacing: 0.2em; }

/* zero fundo, zero borda — só texto */
#btn-conta,
#btn-ranking {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  font: 600 12px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.15s ease, opacity 0.15s ease;
}
#btn-conta:hover,
#btn-ranking:hover {
  color: #fff;
}
#btn-conta:active,
#btn-ranking:active {
  opacity: 0.75;
}
/* ícones minimalistas brancos (Entrar + Ranking) */
#btn-conta .ps-mc-sub,
#btn-ranking .ps-mc-sub,
#btn-ranking .rk-live-dot {
  display: none !important;
}
#btn-conta .ps-mc-icon,
#btn-ranking .ps-mc-icon {
  display: grid !important;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
#btn-conta .ps-mc-icon svg,
#btn-ranking .ps-mc-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  fill: none;
}
#btn-conta .ps-mc-icon img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
#btn-conta .ps-mc-icon.is-emoji {
  font-size: 18px;
  line-height: 1;
  overflow: visible;
  border-radius: 0;
}
#btn-conta,
#btn-ranking {
  gap: 8px;
}
#btn-conta .ps-mc-txt,
#btn-ranking .ps-mc-txt {
  display: block;
}
#btn-ranking .ps-mc-label {
  font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
}
/* nick no cabeçalho: mesma formatação (Title Case), não ALL CAPS */
#btn-conta .ps-mc-label {
  font: 600 13px/1.15 system-ui, sans-serif;
  letter-spacing: 0.02em;
  text-transform: none;
  color: inherit;
  max-width: 11em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.game-mode #top-user-bar,
#top-user-bar.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.is-mobile #top-user-bar .tub-inner {
  padding: 14px 16px 34px;
}
body.is-mobile #btn-conta .ps-mc-label {
  font-size: 12px;
  letter-spacing: 0.01em;
  max-width: 9em;
}
body.is-mobile #btn-ranking .ps-mc-label {
  font-size: 11px;
  letter-spacing: 0.12em;
}

/* �"?�"? rail direito: só fases �"?�"? */
#phase-shortcuts {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.35s ease;
}
#phase-shortcuts .ps-label {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  margin: 0;
  user-select: none;
  pointer-events: none;
}
#phase-shortcuts .ps-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  pointer-events: auto;
}
/* linha: stats à esquerda · ícone da fase à direita */
#phase-shortcuts .ps-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: auto;
  max-width: min(360px, calc(100vw - 48px));
}
#phase-shortcuts .ps-stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#phase-shortcuts .ps-row.has-stats .ps-stats {
  opacity: 1;
}
#phase-shortcuts .ps-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}
#phase-shortcuts .ps-stat svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.9;
}
#phase-shortcuts .ps-stat.is-podium {
  color: rgba(240, 215, 140, 0.9);
}
#phase-shortcuts .ps-stat.is-podium.is-first {
  color: #fde68a;
}
#phase-shortcuts .ps-stat.is-empty {
  opacity: 0.28;
}
#phase-shortcuts .ps-btn {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.18s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease,
    filter 0.2s ease;
}
#phase-shortcuts .ps-btn > svg.ps-ico,
#phase-shortcuts .ps-btn > svg:not(.ps-lock-ico) {
  width: 15px;
  height: 15px;
  display: block;
  overflow: visible;
}
/* numeração removida do menu */
#phase-shortcuts .ps-btn .ps-num {
  display: none !important;
}
/* cadeado (só em fases bloqueadas) */
#phase-shortcuts .ps-btn .ps-lock {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: rgba(8, 10, 14, 0.55);
  pointer-events: none;
  z-index: 2;
}
#phase-shortcuts .ps-btn .ps-lock svg {
  width: 12px;
  height: 12px;
  color: rgba(220, 225, 235, 0.75);
  display: block;
}
#phase-shortcuts .ps-btn.is-locked {
  opacity: 0.42;
  filter: grayscale(0.9) brightness(0.75);
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(12, 14, 18, 0.45);
  box-shadow: none;
  color: rgba(180, 185, 195, 0.55);
}
#phase-shortcuts .ps-btn.is-locked .ps-lock {
  display: grid;
}
#phase-shortcuts .ps-btn.is-locked > svg:not(.ps-lock-ico) {
  opacity: 0.35;
}
#phase-shortcuts .ps-btn.is-locked:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(12, 14, 18, 0.45);
  box-shadow: none;
}
#phase-shortcuts .ps-btn.is-locked:hover .ps-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
#phase-shortcuts .ps-btn.is-locked:active {
  transform: none;
}
#phase-shortcuts .ps-btn .ps-tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(10, 10, 12, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font: 600 10px/1.2 system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
#phase-shortcuts .ps-btn .ps-tip .ps-sub {
  display: block;
  margin-top: 3px;
  font: 500 9px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
}
#phase-shortcuts .ps-btn:not(.is-locked):hover {
  transform: scale(1.08);
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 6px 22px rgba(0, 0, 0, 0.35);
}
#phase-shortcuts .ps-btn:not(.is-locked):hover .ps-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
#phase-shortcuts .ps-btn:not(.is-locked):active {
  transform: scale(0.96);
}
/* cores por tema */
#phase-shortcuts .ps-btn[data-phase="1"] { border-color: rgba(150, 200, 255, 0.65); }
#phase-shortcuts .ps-btn[data-phase="1"]:hover { border-color: #9ecbff; box-shadow: 0 0 18px rgba(100, 170, 255, 0.25); }
#phase-shortcuts .ps-btn[data-phase="2"] { border-color: rgba(220, 140, 255, 0.65); }
#phase-shortcuts .ps-btn[data-phase="2"]:hover { border-color: #d8a0ff; box-shadow: 0 0 18px rgba(180, 100, 255, 0.25); }
#phase-shortcuts .ps-btn[data-phase="3"] { border-color: rgba(120, 160, 255, 0.65); }
#phase-shortcuts .ps-btn[data-phase="3"]:hover { border-color: #93c5fd; box-shadow: 0 0 18px rgba(80, 140, 255, 0.25); }
#phase-shortcuts .ps-btn[data-phase="4"] { border-color: rgba(110, 230, 180, 0.65); }
#phase-shortcuts .ps-btn[data-phase="4"]:hover { border-color: #6ee7b7; box-shadow: 0 0 18px rgba(52, 211, 153, 0.25); }
#phase-shortcuts .ps-btn[data-phase="5"] { border-color: rgba(255, 200, 90, 0.7); }
#phase-shortcuts .ps-btn[data-phase="5"]:hover { border-color: #ffd56a; box-shadow: 0 0 18px rgba(255, 190, 60, 0.3); }
#phase-shortcuts .ps-btn[data-phase="6"] { border-color: rgba(180, 140, 255, 0.7); }
#phase-shortcuts .ps-btn[data-phase="6"]:hover { border-color: #c4a0ff; box-shadow: 0 0 18px rgba(160, 100, 255, 0.3); }
#phase-shortcuts .ps-btn[data-phase="7"] { border-color: rgba(100, 220, 200, 0.7); }
#phase-shortcuts .ps-btn[data-phase="7"]:hover { border-color: #5eead4; box-shadow: 0 0 18px rgba(45, 212, 191, 0.3); }
#phase-shortcuts .ps-btn[data-phase="8"] { border-color: rgba(255, 150, 100, 0.75); }
#phase-shortcuts .ps-btn[data-phase="8"]:hover { border-color: #ff9a6a; box-shadow: 0 0 18px rgba(255, 120, 70, 0.32); }
#phase-shortcuts .ps-btn[data-phase="9"] { border-color: rgba(255, 230, 120, 0.75); }
#phase-shortcuts .ps-btn[data-phase="9"]:hover { border-color: #ffe566; box-shadow: 0 0 18px rgba(255, 210, 60, 0.35); }
#phase-shortcuts .ps-btn[data-phase="10"] { border-color: rgba(140, 180, 255, 0.75); }
#phase-shortcuts .ps-btn[data-phase="10"]:hover { border-color: #93c5fd; box-shadow: 0 0 18px rgba(96, 165, 250, 0.35); }

body.game-mode #phase-shortcuts,
#phase-shortcuts.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(12px);
}
body.is-mobile #phase-shortcuts {
  right: 10px;
  gap: 8px;
}
body.is-mobile #phase-shortcuts .ps-label {
  display: none;
}
body.is-mobile #phase-shortcuts .ps-stat {
  font-size: 11px;
  gap: 4px;
}
body.is-mobile #phase-shortcuts .ps-stat svg {
  width: 13px;
  height: 13px;
}
body.is-mobile #phase-shortcuts .ps-row {
  gap: 8px;
}
body.is-mobile #phase-shortcuts .ps-stats {
  gap: 8px;
}
body.is-mobile #phase-shortcuts .ps-btn {
  width: 32px;
  height: 32px;
}
body.is-mobile #phase-shortcuts .ps-rail {
  gap: 5px;
}
body.is-mobile #phase-shortcuts {
  right: 10px;
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   RANKING — minimalista · head/foot fixos · scroll só na lista
   (sem scrollbar lateral visível)
*/
#ranking-overlay,
#rank-join-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s;
}
#ranking-overlay.open,
#rank-join-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.rk-panel {
  width: min(400px, calc(100vw - 32px));
  height: min(82vh, 640px);
  max-height: min(82vh, 640px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0e1016;
  color: #fff;
  box-shadow: none;
}
.rk-panel.rk-join {
  width: min(380px, calc(100vw - 32px));
  height: auto;
  max-height: min(90vh, 720px);
}
/* �"?�"? cabeçalho FIXO �"?�"? */
.rk-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #0e1016;
  z-index: 2;
}
.rk-head h2 {
  margin: 0;
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.rk-head p {
  display: none; /* minimalista: só o título */
}
.rk-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
}
.rk-close:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
/* �"?�"? resumo do jogador (fixo sob o head) �"?�"? */
.rk-summary {
  flex-shrink: 0;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #0e1016;
  z-index: 1;
}
.rk-you {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}
.rk-you.offline {
  background: transparent;
  border: none;
  opacity: 0.92;
}
/* deslogado: card do #1 (preview do líder) */
.rk-you.is-leader-preview .nick::after {
  content: none;
}
.rk-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  overflow: hidden;
}
.rk-av img { width: 100%; height: 100%; object-fit: cover; }
.rk-you-meta { flex: 1; min-width: 0; }
.rk-you-meta .nick {
  font: 600 15px/1.2 system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}
.rk-you-meta .sub {
  margin-top: 3px;
  font: 400 11px/1.3 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.4);
}
.rk-you-score {
  text-align: right;
  flex-shrink: 0;
}
.rk-you-score .big {
  font: 600 16px/1 system-ui, sans-serif;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.rk-you-score .lbl {
  margin-top: 3px;
  font: 400 9px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.rk-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 12px 0 0;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.rk-stat {
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  text-align: center;
}
.rk-stat + .rk-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.rk-stat .v {
  font: 600 14px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.rk-stat .k {
  margin-top: 4px;
  font: 400 9px/1 system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
/* �"?�"? área de scroll (só a lista) — scrollbar invisível �"?�"? */
.rk-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}
.rk-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent;
}
.rk-list-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 20px 8px;
  font: 500 10px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0e1016;
}
.rk-list-head .live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.08em;
}
.rk-list-head .live .rk-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6ee7b7;
  box-shadow: none;
}
.rk-list {
  padding: 0 12px 8px;
  min-height: 0;
  overflow: visible; /* scroll é no .rk-scroll pai */
}
.rk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 8px;
  border-radius: 0;
  margin-bottom: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.12s;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.rk-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.rk-row:active {
  background: rgba(255, 255, 255, 0.07);
}
.rk-row:last-child { border-bottom: none; }
.rk-row.me {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.rk-row.me .nick { color: #fff; }
.rk-row.podium-1,
.rk-row.podium-2,
.rk-row.podium-3 {
  background: transparent;
}
.rk-pos {
  width: 28px;
  font: 500 12px/1 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rk-row.podium-1 .rk-pos { color: rgba(255, 255, 255, 0.9); font-weight: 600; }
.rk-row.podium-2 .rk-pos { color: rgba(255, 255, 255, 0.75); }
.rk-row.podium-3 .rk-pos { color: rgba(255, 255, 255, 0.6); }
.rk-row .rk-av {
  width: 34px;
  height: 34px;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.rk-row-meta { flex: 1; min-width: 0; }
.rk-row-meta .nick {
  font: 500 13px/1.2 system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.88);
}
.rk-row-meta .sub {
  margin-top: 2px;
  font: 400 10px/1.2 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.35);
}
.rk-row-pts {
  font: 500 13px/1 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.75);
  font-variant-numeric: tabular-nums;
}
/* �"?�"? rodapé FIXO �"?�"? */
.rk-foot {
  flex-shrink: 0;
  padding: 12px 16px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 10px;
  background: #0e1016;
  z-index: 2;
}
.rk-foot button {
  flex: 1;
  padding: 13px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font: 500 12px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rk-foot button.primary {
  background: #fff;
  border-color: #fff;
  color: #0b0b0d;
}
.rk-foot button:hover {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.rk-foot button.primary:hover {
  background: rgba(255, 255, 255, 0.92);
  color: #0b0b0d;
  filter: none;
}

/* modal inscrição — mesmo visual + scroll interno sem barra */
.rk-join .rk-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 20px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rk-join .rk-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.rk-join .rk-ask {
  font: 400 14px/1.5 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}
.rk-join .rk-ask strong {
  color: #fff;
  font-weight: 600;
}
.rk-field {
  margin-bottom: 12px;
}
.rk-field label {
  display: block;
  margin-bottom: 6px;
  font: 500 10px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.rk-field input,
.rk-field select {
  width: 100%;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: 500 14px/1.2 system-ui, sans-serif;
  outline: none;
}
.rk-field input:focus,
.rk-field select:focus {
  border-color: rgba(255, 255, 255, 0.35);
}
.rk-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rk-avatars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.rk-avatars button {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 22px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.rk-avatars button.selected {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
  transform: none;
}
.rk-upload {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rk-upload label.file {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  text-align: center;
  font: 500 11px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.rk-upload label.file:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.rk-upload input[type="file"] { display: none; }
.rk-upload .prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.3);
  display: none;
}
.rk-upload .prev.on { display: block; }
.rk-upload .prev img { width: 100%; height: 100%; object-fit: cover; }
.rk-err {
  color: #fb7185;
  font: 500 12px/1.3 system-ui, sans-serif;
  min-height: 1.2em;
  margin: 4px 0 8px;
}
.rk-join-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.rk-join-actions button {
  width: 100%;
  padding: 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font: 500 12px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.rk-join-actions button.yes,
.rk-join-actions button.save {
  background: #fff;
  border-color: #fff;
  color: #0b0b0d;
}
.rk-join-actions button:hover {
  border-color: rgba(255, 255, 255, 0.35);
}
.rk-join-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 18px 18px;
}
.rk-join-actions button {
  padding: 13px;
  border-radius: 12px;
  border: none;
  font: 700 13px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.rk-join-actions .yes {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a1205;
}
.rk-join-actions .no {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.55);
}
.rk-join-actions .save {
  background: linear-gradient(135deg, #34d399, #059669);
  color: #042f1e;
}
.rk-join-actions .back {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
}
#rk-form-step { display: none; }
#rk-form-step.on { display: block; }
#rk-ask-step { display: none; }
#rk-ask-step.on { display: block; }

#auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 6, 10, 0.75);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s;
}
#auth-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#auth-overlay.ceremony-mode {
  background: #050608;
}
#auth-overlay.ceremony-mode .auth-panel {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   CERIM�"NIA CINEMATOGRÁFICA — criação de perfil
   Fases (JS data-phase): 0 black �?' 1 title �?' 2 beam
   �?' 3 card �?' 4 identity �?' 5 seal �?' 6 hold �?' 7 outro
   �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */
.auth-created {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gold: #f0d78c;
  --gold-dim: rgba(240, 215, 140, 0.55);
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.auth-created.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.auth-created-bg {
  position: absolute;
  inset: 0;
  background: #050608;
}
.auth-created-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 50% 48%, rgba(240, 215, 140, 0.09), transparent 70%);
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.auth-created[data-phase="2"] .auth-created-bg::after,
.auth-created[data-phase="3"] .auth-created-bg::after,
.auth-created[data-phase="4"] .auth-created-bg::after,
.auth-created[data-phase="5"] .auth-created-bg::after,
.auth-created[data-phase="6"] .auth-created-bg::after {
  opacity: 1;
}
.auth-created-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 35%, rgba(0,0,0,0.72) 100%);
}
.auth-created-stage {
  position: relative;
  z-index: 2;
  width: min(300px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* �"?�"? FASE 1: título �"?�"? */
.acc-cinematic-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease), transform 0.9s var(--ease);
}
.auth-created[data-phase="1"] .acc-cinematic-title,
.auth-created[data-phase="2"] .acc-cinematic-title {
  opacity: 1;
}
.auth-created[data-phase="2"] .acc-cinematic-title {
  transform: translate(-50%, calc(-50% - 18px));
  opacity: 0.35;
}
.auth-created[data-phase="3"] .acc-cinematic-title,
.auth-created[data-phase="4"] .acc-cinematic-title,
.auth-created[data-phase="5"] .acc-cinematic-title,
.auth-created[data-phase="6"] .acc-cinematic-title,
.auth-created[data-phase="7"] .acc-cinematic-title {
  opacity: 0;
  transform: translate(-50%, calc(-50% - 40px));
  transition-duration: 0.55s;
}
.acc-rule {
  display: block;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  transition: width 0.85s var(--ease);
}
.auth-created[data-phase="1"] .acc-rule,
.auth-created[data-phase="2"] .acc-rule {
  width: min(180px, 48vw);
}
.acc-headline {
  margin: 0;
  font: 300 13px/1 system-ui, sans-serif;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s 0.25s var(--ease), transform 0.7s 0.25s var(--ease), letter-spacing 1.1s 0.2s var(--ease);
}
.auth-created[data-phase="1"] .acc-headline,
.auth-created[data-phase="2"] .acc-headline {
  opacity: 1;
  transform: translateY(0);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}
.acc-subhead {
  margin: 0;
  font: 400 10px/1 system-ui, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-dim);
  opacity: 0;
  transition: opacity 0.6s 0.45s var(--ease);
}
.auth-created[data-phase="1"] .acc-subhead,
.auth-created[data-phase="2"] .acc-subhead {
  opacity: 1;
}

/* �"?�"? FASE 2—3: feixe + carta �"?�"? */
.acc-beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 0;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: 0;
  box-shadow: 0 0 18px rgba(240, 215, 140, 0.45);
  transition: height 0.7s var(--ease), opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}
.auth-created[data-phase="2"] .acc-beam {
  height: min(42vh, 280px);
  opacity: 0.85;
}
.auth-created[data-phase="3"] .acc-beam,
.auth-created[data-phase="4"] .acc-beam {
  height: min(20vh, 120px);
  opacity: 0.25;
}
.auth-created[data-phase="5"] .acc-beam,
.auth-created[data-phase="6"] .acc-beam,
.auth-created[data-phase="7"] .acc-beam {
  opacity: 0;
  height: 0;
}

.auth-created-card {
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: 2.5 / 3.5;
  max-height: min(52vh, 380px);
  margin-top: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(165deg, #16181f 0%, #0a0b0e 55%, #12141a 100%);
  box-shadow: 0 28px 64px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 24px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.92) translateY(28px);
  filter: blur(6px);
  transition:
    opacity 0.85s var(--ease),
    transform 1s var(--ease),
    filter 0.9s var(--ease),
    border-color 0.8s ease,
    box-shadow 0.8s ease;
}
.auth-created[data-phase="3"] .auth-created-card,
.auth-created[data-phase="4"] .auth-created-card,
.auth-created[data-phase="5"] .auth-created-card,
.auth-created[data-phase="6"] .auth-created-card {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
  border-color: rgba(240, 215, 140, 0.35);
  box-shadow:
    0 28px 64px rgba(0,0,0,0.55),
    0 0 48px rgba(240, 215, 140, 0.12);
}
.auth-created[data-phase="7"] .auth-created-card {
  opacity: 0;
  transform: scale(0.96) translateY(-18px);
  filter: blur(4px) brightness(1.2);
  transition-duration: 0.65s;
}
.auth-created-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s 0.15s ease, border-color 0.6s ease;
}
.auth-created[data-phase="3"] .auth-created-card::before,
.auth-created[data-phase="4"] .auth-created-card::before,
.auth-created[data-phase="5"] .auth-created-card::before,
.auth-created[data-phase="6"] .auth-created-card::before {
  opacity: 1;
  border-color: rgba(240, 215, 140, 0.18);
}
/* varredura de luz única e limpa */
.acc-sweep {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.14) 48%,
    transparent 62%
  );
  transform: translateX(-120%);
  opacity: 0;
}
.auth-created[data-phase="3"] .acc-sweep {
  opacity: 1;
  animation: acc-sweep 1.1s 0.15s var(--ease) forwards;
}
@keyframes acc-sweep {
  to { transform: translateX(120%); opacity: 0.35; }
}

/* �"?�"? FASE 4: identidade �"?�"? */
.acc-av-wrap {
  position: relative;
  z-index: 2;
  width: 88px;
  height: 88px;
  margin-bottom: 18px;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.65s var(--ease), transform 0.75s var(--ease);
}
.auth-created[data-phase="4"] .acc-av-wrap,
.auth-created[data-phase="5"] .acc-av-wrap,
.auth-created[data-phase="6"] .acc-av-wrap {
  opacity: 1;
  transform: scale(1);
}
.acc-av {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid rgba(240, 215, 140, 0.35);
  display: grid;
  place-items: center;
  font-size: 40px;
  line-height: 1;
  background: rgba(8, 9, 12, 0.95);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.acc-identity {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.65s 0.12s var(--ease), transform 0.7s 0.12s var(--ease);
}
.auth-created[data-phase="4"] .acc-identity,
.auth-created[data-phase="5"] .acc-identity,
.auth-created[data-phase="6"] .acc-identity {
  opacity: 1;
  transform: translateY(0);
}
.acc-identity .acc-nick {
  font: 600 20px/1.2 system-ui, sans-serif;
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0;
}
.acc-identity .acc-nick-line {
  display: block;
  width: 0;
  height: 1px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  transition: width 0.7s 0.2s var(--ease);
}
.auth-created[data-phase="4"] .acc-identity .acc-nick-line,
.auth-created[data-phase="5"] .acc-identity .acc-nick-line,
.auth-created[data-phase="6"] .acc-identity .acc-nick-line {
  width: 72px;
}

/* �"?�"? FASE 5: selo �"?�"? */
.acc-seal {
  position: relative;
  z-index: 2;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s var(--ease), transform 0.6s var(--ease);
}
.auth-created[data-phase="5"] .acc-seal,
.auth-created[data-phase="6"] .acc-seal {
  opacity: 1;
  transform: translateY(0);
}
.acc-seal-badge {
  font: 500 9px/1 system-ui, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.acc-seal-meta {
  font: 400 10px/1 system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
}

/* �"?�"? rodapé da cerimônia �"?�"? */
.acc-footer-tag {
  margin-top: 22px;
  font: 400 10px/1 system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.auth-created[data-phase="5"] .acc-footer-tag,
.auth-created[data-phase="6"] .acc-footer-tag {
  opacity: 1;
}
.auth-created[data-phase="7"] .acc-footer-tag,
.auth-created[data-phase="7"] .acc-cinematic-title,
.auth-created[data-phase="7"] .acc-beam {
  opacity: 0 !important;
}

/* entrada da carta real */
.pcard.pcard-birth {
  animation: pcard-birth 0.95s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
@keyframes pcard-birth {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.94);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-created *,
  .pcard.pcard-birth {
    transition: none !important;
    animation: none !important;
  }
}
.auth-panel {
  position: relative;
  width: min(320px, calc(100vw - 40px));
  max-width: 100%;
  /* card = tamanho do conteúdo; só limita se passar da tela */
  height: fit-content;
  max-height: min(88vh, 560px);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(165deg, rgba(22,24,30,0.98), rgba(10,12,16,0.99));
  box-shadow: 0 20px 48px rgba(0,0,0,0.5);
  color: #fff;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
}
/* �"?�"? modo conta: o chrome some, vira figurinha premium �"?�"? */
.auth-panel.is-account {
  width: auto;
  max-width: min(360px, calc(100vw - 28px));
  height: fit-content;
  max-height: none;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.auth-panel.is-account .rk-head {
  position: absolute;
  top: -6px;
  right: -6px;
  left: auto;
  width: auto;
  padding: 0;
  border: none;
  background: transparent;
  z-index: 20;
}
.auth-panel.is-account .rk-head > div:first-child {
  display: none;
}
.auth-panel.is-account .rk-close {
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.auth-panel.is-account .auth-scroll {
  overflow: visible;
  flex: 0 0 auto;
}
.auth-panel.is-account .auth-footer {
  display: none !important;
}
.auth-panel,
.auth-panel * {
  box-sizing: border-box;
}
.auth-panel:not(.is-account) {
  width: min(320px, calc(100vw - 40px));
  max-height: min(88vh, 560px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(12, 13, 16, 0.97);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.auth-panel:not(.is-account) .auth-scroll {
  flex: 1 1 auto;
  min-height: 0;
}
.auth-panel:not(.is-account).uf-open {
  overflow: visible;
}
.auth-panel .rk-head {
  flex: 0 0 auto;
  align-items: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  z-index: 2;
  min-width: 0;
}
.auth-panel .rk-head h2 {
  font: 600 13px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.auth-panel:not(.is-account) .rk-close {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.4);
  font-size: 18px;
}
.auth-panel:not(.is-account) .rk-close:hover {
  color: #fff;
  background: transparent;
}
.auth-scroll {
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.auth-panel.uf-open,
.auth-scroll.uf-open {
  overflow: visible;
}
.auth-scroll::-webkit-scrollbar {
  width: 6px;
}
.auth-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 99px;
}
.auth-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.auth-footer {
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(10,12,16,0.98);
  z-index: 2;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
/* barra fixa do botão Criar */
.auth-reg-bar {
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 10px 18px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(12, 13, 16, 0.98);
  z-index: 6;
}
.auth-panel.is-reg:not(.is-account) .auth-reg-bar {
  display: flex;
}
.auth-panel.is-account .auth-reg-bar {
  display: none !important;
}
.auth-reg-bar .rk-join-actions {
  padding: 0;
}
.auth-reg-bar .rk-err {
  margin: 0;
}
.auth-reg-bar .rk-err:empty {
  display: none;
}
.auth-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin: 0;
  padding: 0 8px;
}
.auth-tabs button {
  flex: 1;
  padding: 12px 8px 10px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.32);
  font: 500 11px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.auth-tabs button.on {
  color: rgba(255,255,255,0.88);
  border-bottom-color: rgba(255,255,255,0.55);
  font-weight: 600;
}
.auth-tabs button:hover {
  color: rgba(255,255,255,0.65);
}

.auth-google-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 4px;
}
.auth-google-wrap .g-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 10px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
}
.auth-google-wrap .g-divider::before,
.auth-google-wrap .g-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.auth-google-stack {
  position: relative;
  width: 100%;
  min-height: 42px;
}
#auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.78);
  font: 500 13px/1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.15s;
  pointer-events: auto;
  position: relative;
  z-index: 3;
}
.auth-google-stack:hover #auth-google-btn {
  color: #fff;
  filter: none;
}
.auth-google-stack:active #auth-google-btn { transform: none; }
#auth-google-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
#auth-google-btn:disabled {
  opacity: 0.45;
  cursor: wait;
}
/* Host GIS opcional (One Tap / fallback) — não captura o clique principal */
#auth-google-host {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
/* �"?�"? forms login / criar: underline minimal �"?�"? */
.auth-panel .rk-field {
  margin-bottom: 14px;
}
.auth-panel .rk-field label {
  display: block;
  margin-bottom: 8px;
  font: 500 9px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  font-weight: 500;
}
.auth-panel .rk-field input,
.auth-panel .rk-field select {
  width: 100%;
  padding: 8px 0 10px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: #fff;
  font: 400 14px/1.25 system-ui, sans-serif;
  font-weight: 400;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}
.auth-panel .rk-field input::placeholder {
  color: rgba(255,255,255,0.2);
  font-weight: 400;
}
.auth-panel .rk-field input:focus,
.auth-panel .rk-field select:focus {
  border-bottom-color: rgba(255,255,255,0.45);
  box-shadow: none;
  background: transparent;
}
.auth-panel .rk-field select {
  cursor: pointer;
}
.auth-panel .rk-field-row {
  gap: 16px;
  margin-bottom: 0;
}
.auth-panel .rk-field-row .rk-field {
  margin-bottom: 14px;
}

/* �"?�"? Seletor de Estado (UF) profissional �"?�"? */
.uf-field {
  position: relative;
  z-index: 5;
}
.uf-select {
  position: relative;
  width: 100%;
}
.uf-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 0 10px;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}
.uf-trigger:hover,
.uf-select.open .uf-trigger {
  border-bottom-color: rgba(255,255,255,0.4);
}
.uf-trigger-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.uf-code {
  flex: 0 0 auto;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  color: rgba(255, 230, 176, 0.9);
  min-width: 1.6em;
}
.uf-name {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 14px/1.2 system-ui, sans-serif;
  color: rgba(255,255,255,0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uf-chevron {
  flex: 0 0 auto;
  color: rgba(255,255,255,0.35);
  transition: transform 0.2s ease, color 0.15s;
}
.uf-select.open .uf-chevron {
  transform: rotate(180deg);
  color: rgba(255,255,255,0.7);
}
.uf-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  top: auto;
  z-index: 40;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(14, 15, 18, 0.98);
  box-shadow:
    0 -12px 48px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  backdrop-filter: blur(12px);
  overflow: hidden;
  animation: uf-panel-in 0.16s ease-out;
}
.uf-panel[hidden] {
  display: none !important;
}
@keyframes uf-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.uf-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.uf-search-ico {
  flex: 0 0 auto;
  color: rgba(255,255,255,0.28);
}
.uf-search {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: #fff;
  font: 400 13px/1.2 system-ui, sans-serif;
  outline: none;
  padding: 4px 0;
}
.uf-search::placeholder {
  color: rgba(255,255,255,0.25);
}
.uf-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.uf-list::-webkit-scrollbar {
  width: 6px;
}
.uf-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 99px;
}
.uf-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.uf-option:hover,
.uf-option.is-active {
  background: rgba(255,255,255,0.06);
}
.uf-option.is-selected {
  background: rgba(255, 230, 176, 0.08);
}
.uf-option.is-selected .uf-opt-code {
  color: #ffe6b0;
}
.uf-opt-code {
  flex: 0 0 auto;
  width: 28px;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
}
.uf-opt-name {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 13px/1.2 system-ui, sans-serif;
  color: rgba(255,255,255,0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uf-opt-check {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0;
  color: #ffe6b0;
}
.uf-option.is-selected .uf-opt-check {
  opacity: 1;
}
.uf-empty {
  padding: 16px 12px;
  text-align: center;
  font: 400 12px/1.3 system-ui, sans-serif;
  color: rgba(255,255,255,0.35);
}
.auth-panel .rk-err {
  font: 400 11px/1.35 system-ui, sans-serif;
  font-weight: 400;
  color: #fda4af;
  min-height: 0;
  margin: 0 0 10px;
}
.auth-panel .rk-err:empty {
  display: none;
}
.auth-panel .rk-join-actions {
  padding: 8px 0 0;
  gap: 0;
}
.auth-panel .rk-join-actions .save {
  width: 100%;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.28);
  padding: 12px 0;
  background: transparent;
  color: rgba(255,255,255,0.88);
  font: 500 12px/1 system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: none;
  transition: color 0.15s, border-color 0.15s;
}
.auth-panel .rk-join-actions .save:hover {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.55);
  filter: none;
  background: transparent;
}
.auth-panel .rk-join-actions .yes,
.auth-panel .rk-join-actions .no {
  border-radius: 0;
}
.auth-account {
  display: none;
  padding: 8px 4px 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}
.auth-account.on {
  display: block;
}
.auth-forms {
  display: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.auth-forms.on { display: block; }
#auth-login-form, #auth-reg-form { display: none; }
#auth-login-form.on, #auth-reg-form.on { display: block; }
.auth-body {
  padding: 18px 18px 20px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.auth-panel .rk-field,
.auth-panel .rk-field-row,
.auth-panel .rk-join-actions {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.auth-panel .rk-join-actions {
  padding-left: 0;
  padding-right: 0;
}

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   FIGURINHA PREMIUM — carta holográfica 3D
   �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.� */
.pcard-stage {
  perspective: 1400px;
  width: min(300px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 12px 8px 20px;
  --rx: 0deg;
  --ry: 0deg;
  --gx: 50%;
  --gy: 40%;
}
.pcard {
  position: relative;
  width: 100%;
  aspect-ratio: 2.5 / 3.5;
  max-height: min(72vh, 460px);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.12s ease-out;
  will-change: transform;
}
.pcard.is-flipped {
  transform: rotateX(0deg) rotateY(0deg);
}
.pcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pcard.is-flipped .pcard-inner {
  transform: rotateY(180deg);
}
/* tokens de tier (default = comum) */
.pcard {
  --pc-border: rgba(148, 163, 184, 0.28);
  --pc-frame: rgba(148, 163, 184, 0.2);
  --pc-line: rgba(148, 163, 184, 0.28);
  --pc-accent: rgba(203, 213, 225, 0.72);
  --pc-stat: #e2e8f0;
  --pc-glow: rgba(100, 116, 139, 0.1);
  --pc-holo-a: rgba(148, 163, 184, 0.12);
  --pc-holo-b: rgba(100, 116, 139, 0.1);
  --pc-ring: conic-gradient(from 180deg, #64748b, #94a3b8, #475569, #94a3b8, #64748b);
  --pc-ring-op: 0.45;
  --pc-holo-op: 0.28;
  --pc-shine-op: 0.55;
}
.pcard-face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border: 1px solid var(--pc-border);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.55) inset,
    0 18px 50px rgba(0,0,0,0.55),
    0 0 32px var(--pc-glow);
}
.pcard-front {
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 12px;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(148, 163, 184, 0.1), transparent 45%),
    radial-gradient(90% 70% at 100% 100%, rgba(71, 85, 105, 0.14), transparent 50%),
    linear-gradient(165deg, #16181e 0%, #0c0d10 45%, #12141a 100%);
  color: #fff;
  pointer-events: auto;
}
.pcard-back {
  z-index: 1;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px 14px 10px;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(148, 163, 184, 0.08), transparent 50%),
    linear-gradient(165deg, #14151a 0%, #0a0b0e 100%);
  color: #fff;
  pointer-events: none;
}
.pcard.is-flipped .pcard-front {
  pointer-events: none;
  z-index: 1;
}
.pcard.is-flipped .pcard-back {
  pointer-events: auto;
  z-index: 2;
}
/* moldura interna */
.pcard-front::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 13px;
  border: 1px solid var(--pc-frame);
  pointer-events: none;
  z-index: 4;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 0 20px var(--pc-glow);
}
/* holograma / rainbow shine — segue o mouse via --gx/--gy */
.pcard-holo {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  z-index: 5;
  opacity: var(--pc-holo-op);
  mix-blend-mode: color-dodge;
  background:
    linear-gradient(
      115deg,
      transparent 20%,
      var(--pc-holo-a) 35%,
      var(--pc-holo-b) 50%,
      var(--pc-holo-a) 65%,
      transparent 80%
    );
  background-size: 220% 220%;
  background-position: var(--gx) var(--gy);
  transition: background-position 0.08s linear;
}
.pcard-shine {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  z-index: 6;
  background:
    radial-gradient(
      circle at var(--gx) var(--gy),
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.12) 18%,
      transparent 42%
    );
  opacity: var(--pc-shine-op);
  mix-blend-mode: soft-light;
}
.pcard-glare {
  display: block;
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 7;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.28) 48%,
    rgba(255,255,255,0.05) 52%,
    transparent 60%
  );
  transform: translateX(calc((var(--gx) - 50%) * 0.6)) rotate(12deg);
  opacity: 0.55;
}
/* �"?�"? Tiers de ranking �"?�"?
   common  �?' padrão (sem status especial dourado)
   top10   �?' aço / gelo
   top5    �?' violeta elite
   top3    �?' platina
   first   �?' ouro campeão (maior diferencial)
*/
.pcard[data-tier="top10"] {
  --pc-border: rgba(56, 189, 248, 0.4);
  --pc-frame: rgba(56, 189, 248, 0.28);
  --pc-line: rgba(125, 211, 252, 0.35);
  --pc-accent: rgba(125, 211, 252, 0.85);
  --pc-stat: #7dd3fc;
  --pc-glow: rgba(14, 165, 233, 0.22);
  --pc-holo-a: rgba(56, 189, 248, 0.22);
  --pc-holo-b: rgba(167, 139, 250, 0.16);
  --pc-ring: conic-gradient(from 180deg, #0ea5e9, #67e8f9, #38bdf8, #818cf8, #0ea5e9);
  --pc-ring-op: 0.7;
  --pc-holo-op: 0.42;
  --pc-shine-op: 0.75;
}
.pcard[data-tier="top10"] .pcard-front {
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(14, 165, 233, 0.18), transparent 48%),
    radial-gradient(90% 70% at 100% 100%, rgba(99, 102, 241, 0.16), transparent 52%),
    linear-gradient(165deg, #0f1724 0%, #0a1018 50%, #0c1420 100%);
}
.pcard[data-tier="top5"] {
  --pc-border: rgba(167, 139, 250, 0.48);
  --pc-frame: rgba(192, 132, 252, 0.32);
  --pc-line: rgba(196, 181, 253, 0.38);
  --pc-accent: rgba(216, 180, 254, 0.9);
  --pc-stat: #e9d5ff;
  --pc-glow: rgba(139, 92, 246, 0.28);
  --pc-holo-a: rgba(192, 132, 252, 0.28);
  --pc-holo-b: rgba(244, 114, 182, 0.18);
  --pc-ring: conic-gradient(from 180deg, #a78bfa, #e879f9, #818cf8, #c084fc, #a78bfa);
  --pc-ring-op: 0.82;
  --pc-holo-op: 0.5;
  --pc-shine-op: 0.82;
}
.pcard[data-tier="top5"] .pcard-front {
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(139, 92, 246, 0.22), transparent 46%),
    radial-gradient(90% 70% at 100% 100%, rgba(236, 72, 153, 0.14), transparent 50%),
    linear-gradient(165deg, #161022 0%, #0c0a14 48%, #14101c 100%);
}
.pcard[data-tier="top3"] {
  --pc-border: rgba(226, 232, 240, 0.5);
  --pc-frame: rgba(248, 250, 252, 0.35);
  --pc-line: rgba(241, 245, 249, 0.4);
  --pc-accent: rgba(248, 250, 252, 0.92);
  --pc-stat: #f8fafc;
  --pc-glow: rgba(226, 232, 240, 0.22);
  --pc-holo-a: rgba(255, 255, 255, 0.22);
  --pc-holo-b: rgba(186, 230, 253, 0.16);
  --pc-ring: conic-gradient(from 180deg, #e2e8f0, #fff, #94a3b8, #f1f5f9, #e2e8f0);
  --pc-ring-op: 0.9;
  --pc-holo-op: 0.55;
  --pc-shine-op: 0.9;
}
.pcard[data-tier="top3"] .pcard-front {
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.14), transparent 45%),
    radial-gradient(90% 70% at 100% 100%, rgba(148, 163, 184, 0.18), transparent 50%),
    linear-gradient(165deg, #1c1f26 0%, #0e1014 48%, #171a20 100%);
}
.pcard[data-tier="top3"] .pcard-face {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 20px 56px rgba(0,0,0,0.55),
    0 0 48px rgba(226, 232, 240, 0.18);
}
.pcard[data-tier="first"] {
  --pc-border: rgba(251, 191, 36, 0.65);
  --pc-frame: rgba(253, 224, 71, 0.45);
  --pc-line: rgba(253, 224, 71, 0.5);
  --pc-accent: #fde68a;
  --pc-stat: #fde68a;
  --pc-glow: rgba(251, 191, 36, 0.4);
  --pc-holo-a: rgba(251, 191, 36, 0.35);
  --pc-holo-b: rgba(244, 114, 182, 0.22);
  --pc-ring: conic-gradient(from 180deg, #f59e0b, #fde68a, #fbbf24, #f97316, #f59e0b);
  --pc-ring-op: 1;
  --pc-holo-op: 0.65;
  --pc-shine-op: 1;
}
.pcard[data-tier="first"] .pcard-front {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(251, 191, 36, 0.32), transparent 48%),
    radial-gradient(100% 80% at 100% 100%, rgba(180, 83, 9, 0.22), transparent 52%),
    radial-gradient(60% 40% at 50% 50%, rgba(253, 224, 71, 0.08), transparent 70%),
    linear-gradient(165deg, #2a1a08 0%, #120c06 42%, #1f1408 100%);
}
.pcard[data-tier="first"] .pcard-face {
  box-shadow:
    0 0 0 1px rgba(253, 224, 71, 0.2) inset,
    0 22px 60px rgba(0,0,0,0.6),
    0 0 56px rgba(251, 191, 36, 0.35),
    0 0 100px rgba(245, 158, 11, 0.12);
}
.pcard[data-tier="first"] .pcard-front::before {
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 180, 0.12),
    inset 0 0 36px rgba(251, 191, 36, 0.12);
}
.pcard[data-tier="first"] .pcard-rarity {
  letter-spacing: 0.2em;
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.65);
  color: #fde68a;
}
.pcard[data-tier="first"] .ac-nick {
  background: linear-gradient(90deg, #fff7d6, #fbbf24, #fff7d6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
}
.pcard[data-tier="first"] .pcard-art::after {
  content: '👑';
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: #fde68a;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.8);
  z-index: 3;
  pointer-events: none;
  line-height: 1;
}
/* �"?�"? conteúdo interno: só linhas + tipografia (sem caixas) �"?�"? */
.pcard-rule {
  width: 100%;
  height: 1px;
  border: none;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--pc-line) 12%,
    var(--pc-line) 88%,
    transparent
  );
  pointer-events: none;
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
}
.pcard-top {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 8px;
}
.pcard-brand {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pc-accent);
  opacity: 0.85;
}
.pcard-rarity {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pc-accent);
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}
.pcard-art {
  position: relative;
  z-index: 8;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 8px 0;
}
.pcard-art-ring {
  position: absolute;
  width: min(54%, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pc-ring);
  opacity: var(--pc-ring-op);
  animation: pcard-spin 8s linear infinite;
  pointer-events: none;
}
.pcard-art-ring::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #0c0a12;
}
@keyframes pcard-spin {
  to { transform: rotate(360deg); }
}
.ac-avatar {
  position: relative;
  z-index: 1;
  width: min(50%, 124px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--pc-border);
  display: grid;
  place-items: center;
  font-size: clamp(34px, 11vw, 48px);
  overflow: hidden;
  line-height: 1;
  box-shadow: none;
}
.ac-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pcard-identity {
  position: relative;
  z-index: 8;
  text-align: center;
  min-width: 0;
  padding: 10px 4px 8px;
}
.ac-nick,
.pcard-identity .ac-nick {
  font: 700 17px/1.2 system-ui, sans-serif;
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#auth-reg-nick,
#auth-me-nick-input,
#rk-nick {
  text-overflow: ellipsis;
}
.ac-email,
.pcard-identity .ac-email {
  margin-top: 5px;
  font: 400 11px/1.3 system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.42);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac-metrics,
.pcard-stats {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 10px 0;
}
.ac-metric {
  background: none;
  border: none;
  border-radius: 0;
  padding: 2px 6px;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  backdrop-filter: none;
  position: relative;
}
.ac-metric + .ac-metric::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: var(--pc-line);
  pointer-events: none;
}
.ac-metric .v {
  font: 600 14px/1.15 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--pc-stat);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac-metric .k {
  margin-top: 5px;
  font: 500 8px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.pcard-footer-front {
  position: relative;
  z-index: 8;
  margin-top: 0;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pcard-serial {
  font: 400 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.28);
}
/* ícones de flip: só traço, sem fundo/borda */
.pcard-flip-btn {
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.45);
  font: inherit;
  padding: 4px;
  margin: 0;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: color 0.15s;
}
.pcard-flip-btn:hover {
  color: #ffe6b0;
  background: transparent;
  border: none;
}
.pcard-flip-btn:focus-visible {
  outline: 1px solid rgba(255,220,160,0.4);
  outline-offset: 3px;
}
.pcard-flip-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
/* verso — head + corpo scroll + rodapé fixo (Salvar nunca esmaga) */
.pcard-back-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pcard-back-head h3 {
  margin: 0;
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  background: none;
  border: none;
}
.pcard-back-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 10px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pcard-back-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
.pcard-section {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 8px 0;
  min-width: 0;
  flex-shrink: 0;
}
/* seção do avatar cresce quando emojis estão abertos */
.pcard-section.is-emoji-open {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pcard-section-label {
  display: block;
  margin-bottom: 8px;
  font: 500 9px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.ac-avatar-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.ac-avatar-actions button {
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.5);
  padding: 4px;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: color 0.15s;
}
.ac-avatar-actions button:hover {
  color: #fff;
  background: transparent;
}
.ac-avatar-actions button.is-on {
  color: #fff;
}
.ac-avatar-sep {
  color: rgba(255,255,255,0.18);
  font: 300 13px/1 system-ui, sans-serif;
  user-select: none;
  pointer-events: none;
}
.ac-field {
  width: 100%;
  min-width: 0;
  text-align: left;
  margin: 0;
}
.ac-field label {
  display: block;
  margin-bottom: 8px;
  font: 500 9px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.ac-field input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 6px 0 8px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  font: 500 14px/1.2 system-ui, sans-serif;
  outline: none;
  box-shadow: none;
}
.ac-field input:focus {
  border-bottom-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  background: transparent;
}
.pcard-back .pcard-section:has(.ac-field) {
  padding-bottom: 4px;
}
/* painel de emojis: preenche o espaço livre + scroll lateral visível */
.ac-emoji-panel {
  display: none;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 10px 0 0;
  padding: 10px 6px 10px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.06);
  -ms-overflow-style: auto;
}
.ac-emoji-panel::-webkit-scrollbar {
  width: 6px;
  display: block;
}
.ac-emoji-panel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  margin: 4px 0;
}
.ac-emoji-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}
.ac-emoji-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.55);
}
.ac-emoji-panel.on {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  animation: emojiPanelIn 0.2s ease;
}
@keyframes emojiPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ac-emoji-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  min-width: 0;
  align-content: start;
}
.ac-emoji-grid button {
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
  opacity: 0.8;
  transition: opacity 0.12s, background 0.12s, border-color 0.12s;
}
.ac-emoji-grid button:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
}
.ac-emoji-grid button.on {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  text-shadow: none;
}
/* rodapé: só status + sair (sem botão Salvar — auto-save) */
.pcard-back-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 3;
}
.ac-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  margin: 0;
}
/* botão Salvar removido da UI (auto-save + status) */
.ac-actions .ac-primary,
#auth-save-btn {
  display: none !important;
}
.ac-actions .ac-danger {
  width: 100%;
  padding: 10px 0 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,0.32);
  font: 500 11px/1 system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s;
}
.ac-actions .ac-danger:hover {
  color: #fda4af;
  background: transparent;
}
.ac-status {
  min-height: 16px;
  margin: 0;
  padding: 2px 0 4px;
  font: 500 11px/1.3 system-ui, sans-serif;
  color: rgba(255,255,255,0.4);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  order: -1; /* status acima do Sair */
}
.ac-status.ok { color: rgba(255, 255, 255, 0.8); }
.ac-status.err { color: #fda4af; }
.ac-status.is-saving {
  color: rgba(255, 255, 255, 0.55);
  animation: authStatusPulse 1s ease-in-out infinite;
}
@keyframes authStatusPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
#auth-photo-file { display: none; }
.pcard-hint {
  display: none; /* substituído pela galeria */
}
/* �"?�"? Galeria: Eu + Top 10 �"?�"? */
.pcard-gallery {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  user-select: none;
}
.pcard-gal-label {
  text-align: center;
  font: 500 10px/1.2 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  min-height: 14px;
}
.pcard-gal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.pcard-gal-arrow {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.4);
  font: 300 22px/1 system-ui, sans-serif;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.15s;
}
.pcard-gal-arrow:hover {
  color: #fff;
}
.pcard-gal-arrow:disabled {
  opacity: 0.25;
  cursor: default;
}
.pcard-gal-track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
  justify-content: flex-start;
}
.pcard-gal-track::-webkit-scrollbar {
  display: none;
}
.pcard-gal-item {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.38);
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 8px;
  cursor: pointer;
  border-radius: 0;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s;
}
.pcard-gal-item::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 2px;
  height: 1px;
  background: transparent;
  transition: background 0.15s;
}
.pcard-gal-item:hover {
  color: rgba(255,255,255,0.75);
}
.pcard-gal-item.on {
  color: #ffe6b0;
}
.pcard-gal-item.on::after {
  background: rgba(255, 230, 176, 0.65);
}
.pcard-gal-item.is-me {
  letter-spacing: 0.1em;
}
.pcard-gal-item.tier-first.on { color: #fde68a; }
.pcard-gal-item.tier-first.on::after { background: rgba(253, 230, 138, 0.75); }
.pcard-gal-item.tier-top3.on { color: #f1f5f9; }
.pcard-gal-item.tier-top5.on { color: #e9d5ff; }
.pcard-gal-item.tier-top10.on { color: #7dd3fc; }
/* carta de visitante da galeria: sem editar */
.pcard.is-gallery-guest .pcard-flip-btn {
  display: none !important;
}
.pcard.is-gallery-guest .pcard-footer-front {
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .pcard, .pcard-inner, .pcard-art-ring {
    animation: none !important;
    transition: none !important;
  }
}
.pcard-back .ac-field,
.pcard-back .ac-avatar-actions,
.pcard-back .pcard-back-actions,
.pcard-back .pcard-back-head,
.pcard-back .ac-emoji-panel,
.pcard-back .pcard-section {
  position: relative;
  z-index: 3;
}

body.is-mobile #phase-shortcuts .ps-btn .ps-tip {
  display: none;
}

/* �"?�"? transição vitrine — jogo (Arc Play) �"?�"? */
#trans-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0b0d;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s ease, visibility 0.55s;
  /* isola do resto da página — spin do M no compositor */
  contain: strict;
  isolation: isolate;
  transform: translateZ(0);
}
#trans-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#trans-overlay .trans-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
  width: min(260px, 82vw);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.45s ease 0.08s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
#trans-overlay.show .trans-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* monograma M + anel (só transform = anima na GPU) */
#trans-overlay .trans-mark {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  contain: layout style;
  transform: translateZ(0);
}
#trans-overlay .trans-mark .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.72);
  /* camada própria: spin nunca compete com layout do 3D */
  transform: translateZ(0) rotate(0deg);
  backface-visibility: hidden;
  will-change: transform;
  pointer-events: none;
}
#trans-overlay.show .trans-mark .ring {
  animation: mgRingSpin 1.15s linear infinite;
}
@keyframes mgRingSpin {
  from { transform: translateZ(0) rotate(0deg); }
  to { transform: translateZ(0) rotate(360deg); }
}
#trans-overlay .trans-logo {
  width: 36px;
  height: 36px;
  opacity: 0.95;
  overflow: visible;
  transform: translateZ(0);
}
#trans-overlay .trans-logo .mg-m {
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#trans-overlay .trans-brand {
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 22px;
}
#trans-overlay .trans-tag {
  font: 600 10px/1 system-ui, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 10px;
}
#trans-overlay .trans-title {
  font: 500 22px/1.2 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 16px;
}
#trans-overlay .trans-line {
  width: 0;
  height: 1px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.55);
  transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
#trans-overlay.show .trans-line {
  width: 72px;
}
#trans-overlay .trans-sub {
  margin-top: 14px;
  font: 400 11px/1.4 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  opacity: 0;
  transition: opacity 0.4s ease 0.35s;
}
#trans-overlay.show .trans-sub {
  opacity: 1;
}
#play-menu.fade-out {
  opacity: 0;
  transform: translateY(-50%) translateX(-12px);
  pointer-events: none;
}
#hint {
  transition: opacity 0.35s ease;
}
#hint.fade-out { opacity: 0; }

/* �"?�"? HUD do jogo �"?�"? */
#game-hud {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  font-family: system-ui, -apple-system, sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, visibility 0.55s;
}
#game-hud.active {
  opacity: 1;
  visibility: visible;
}
#game-hud .topbar {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
#game-hud.active .topbar {
  opacity: 1;
  transform: translateY(0);
}
#game-hud .power-dock {
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.5s ease 0.28s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.28s;
}
#game-hud.active .power-dock {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* dicas textuais antigas: removidas da UX */
#game-hud .help {
  display: none !important;
}
#game-hud .crosshair {
  opacity: 0;
  transition: opacity 0.45s ease 0.35s;
}
#game-hud.active .crosshair {
  opacity: 0.85;
}
#game-hud.drawing .crosshair { opacity: 1; }
#game-hud .topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px;
  pointer-events: none;
}
#game-hud .topbar > * { pointer-events: auto; }
#game-hud .phase-info {
  color: rgba(255,255,255,0.88);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
#game-hud .phase-info .phase-text {
  display: flex;
  flex-direction: column;
}
#game-hud .phase-info .tag {
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 6px;
}
#game-hud .phase-info .title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
}
#game-hud .phase-info .title {
  font: 600 18px/1.2 system-ui, sans-serif;
  letter-spacing: 0.02em;
}
/* indicador de vento (fase 2+) */
#game-hud .wind-readout {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(20, 18, 32, 0.55);
  border: 1px solid rgba(180, 160, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #e8e0ff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
}
#game-hud .wind-readout.show { display: inline-flex; }
#game-hud .wind-readout .wind-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 16px;
  color: #c4b5fd;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.45));
}
#game-hud .wind-readout .wind-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#game-hud .wind-readout .wind-arrow {
  width: 18px;
  height: 18px;
  display: block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  color: #c4b5fd;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.55));
}
#game-hud .wind-readout .wind-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#game-hud .wind-readout .wind-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 4.2ch;
}
#game-hud .wind-readout .wind-label {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(196, 181, 253, 0.7);
}
#game-hud .wind-readout .wind-val {
  font: 700 13px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #f5f0ff;
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.35);
}
#game-hud.phase-dusk .phase-info .tag {
  color: rgba(196, 181, 253, 0.75);
}
#game-hud.phase-dusk .match-time {
  border-color: rgba(180, 140, 255, 0.2);
  background: rgba(18, 12, 28, 0.55);
}
body.phase-dusk #game-overlay.pass .ov-kicker {
  color: #c4b5fd;
}
/* fase 3 — noite: azul-aço / luar */
#game-hud.phase-night .phase-info .tag {
  color: rgba(147, 197, 253, 0.82);
}
#game-hud.phase-night .match-time {
  border-color: rgba(96, 165, 250, 0.22);
  background: rgba(8, 14, 28, 0.62);
}
#game-hud.phase-night .wind-readout .wind-lab {
  color: rgba(147, 197, 253, 0.65);
}
#game-hud.phase-night .wind-readout .wind-val {
  color: #e0f2fe;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.4);
}
body.phase-night #game-overlay.pass .ov-kicker {
  color: #93c5fd;
}
/* fase 4 — tempestade: verde-acinzentado / elétrico */
#game-hud.phase-storm .phase-info .tag {
  color: rgba(167, 243, 208, 0.78);
}
#game-hud.phase-storm .match-time {
  border-color: rgba(52, 211, 153, 0.22);
  background: rgba(10, 18, 16, 0.62);
}
#game-hud.phase-storm .wind-readout .wind-lab {
  color: rgba(167, 243, 208, 0.62);
}
#game-hud.phase-storm .wind-readout .wind-val {
  color: #ecfdf5;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
}
body.phase-storm #game-overlay.pass .ov-kicker {
  color: #6ee7b7;
}
/* tempo ao lado do título, com ícone */
#game-hud .match-time {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
#game-hud .match-time .mt-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  color: rgba(255,255,255,0.85);
}
#game-hud .match-time .mt-ico svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#game-hud .match-time #g-time {
  font: 700 15px/1 system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  min-width: 3.2ch;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
#game-hud .match-time.is-urgent {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(40, 30, 8, 0.5);
}
#game-hud .match-time.is-urgent .mt-ico,
#game-hud .match-time.is-urgent #g-time {
  color: #fbbf24;
}
#game-hud .match-time.is-critical {
  border-color: rgba(251, 113, 133, 0.5);
  background: rgba(40, 12, 18, 0.55);
  animation: matchTimePulse 0.7s ease-in-out infinite;
}
#game-hud .match-time.is-critical .mt-ico,
#game-hud .match-time.is-critical #g-time {
  color: #fb7185;
}
@keyframes matchTimePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.82; transform: scale(1.04); }
}
#game-hud .stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  color: #fff;
  font: 500 14px/1 system-ui, sans-serif;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
#game-hud .stats > div {
  padding: 0 14px;
  position: relative;
}
#game-hud .stats > div:first-child {
  padding-left: 0;
}
#game-hud .stats > div:last-child {
  padding-right: 0;
}
#game-hud .stats > div:not(:last-child)::after {
  content: '|';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.35);
  font-weight: 300;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}
#game-hud .stats b {
  display: block;
  font: 600 20px/1.1 system-ui, sans-serif;
  margin-top: 4px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
#game-hud .stats span.label {
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
#btn-exit-game,
#game-opts button {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.35);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 0.15s ease, border-color 0.15s ease;
  pointer-events: auto;
}
#btn-exit-game:hover,
#game-opts button:hover { background: rgba(255,255,255,0.12); }
/* desktop: só o texto "Sair" */
#btn-exit-game .exit-icon { display: none; }
#btn-exit-game .exit-label { display: inline; }
#game-opts {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
#game-opts button.active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
#game-opts .cant-readout {
  min-width: 64px;
  text-align: center;
  font: 600 12px/1 system-ui, sans-serif;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.1);
}
#game-hud.canting .cant-readout {
  color: #ffe08a;
  border-color: rgba(255, 220, 120, 0.45);
}
#game-hud.canting .crosshair {
  opacity: 0.35;
}
#game-hud .crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  pointer-events: none;
}
#game-hud .crosshair::before,
#game-hud .crosshair::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
#game-hud .crosshair::before {
  left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%);
}
#game-hud .crosshair::after {
  top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%);
}
#game-hud .crosshair .dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.55);
}

/*
 * Dock inferior: barra de força CENTRADA (como sempre) + inbox
 * colado à direita da barra — sem deslocar o centro da força.
 */
#game-hud .power-dock {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 45;
  transform: translateX(-50%);
  width: min(320px, 72vw);
  pointer-events: none;
}
#game-hud .power-wrap {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  opacity: 1;
  pointer-events: none;
}
#game-hud .power-label {
  display: flex;
  justify-content: space-between;
  font: 500 11px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}
#game-hud .power-row {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}
/* − / + só no mobile */
#game-hud .power-btn {
  display: none;
  appearance: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font: 600 22px/1 system-ui, sans-serif;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
#game-hud .power-btn:active {
  transform: scale(0.92);
  opacity: 0.75;
}
#game-hud .power-track {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.22);
  position: relative;
  min-width: 0;
  box-shadow: none;
}
#game-hud .power-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7ec8ff, #ffe08a 55%, #ff8a5b);
  box-shadow: 0 0 12px rgba(255, 200, 100, 0.35);
  transition: width 0.08s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#game-hud .power-target-mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  left: 70%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 8px rgba(255,255,255,0.55);
  border-radius: 1px;
  pointer-events: none;
  transition: left 0.12s ease;
}
#game-hud .power-target-mark::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255,255,255,0.95);
}

/* ── botão MIRA: logo ABAIXO do #bow-grab / #bow-draw ── */
#btn-sight {
  --sight-accent: #7ec8ff;
  position: absolute;
  left: 50%;
  /* grab/draw em bottom:120px · força em ~28px → mira no vão entre os dois */
  bottom: 68px;
  z-index: 81;
  margin: 0;
  padding: 0 10px 0 0;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%) scale(0.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4));
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  font-family: system-ui, -apple-system, sans-serif;
}
#btn-sight[hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* visível quando o JS tira [hidden] (arco com mira equipado) */
#btn-sight:not([hidden]) {
  display: inline-flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}
#btn-sight .sight-core {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.2), transparent 52%),
    linear-gradient(160deg, rgba(22, 36, 52, 0.9), rgba(10, 14, 20, 0.88));
  border: 1px solid rgba(126, 200, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(80, 160, 220, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.15s ease, border-color 0.15s, box-shadow 0.15s;
}
#btn-sight .sight-aura {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(126, 200, 255, 0.2) 0%, transparent 68%);
  opacity: 0.7;
}
#btn-sight .sight-core svg {
  width: 26px;
  height: 26px;
  display: block;
  color: var(--sight-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(126, 200, 255, 0.35));
  position: relative;
  z-index: 1;
}
#btn-sight .sight-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding-right: 4px;
}
#btn-sight .sight-label {
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
#btn-sight .sight-zoom {
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(160, 220, 255, 0.95);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
#btn-sight:hover .sight-core {
  transform: scale(1.07);
  border-color: rgba(160, 220, 255, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.22),
    0 0 26px rgba(80, 160, 220, 0.32);
}
#btn-sight:active .sight-core { transform: scale(0.95); }
#btn-sight.on,
#btn-sight.active {
  --sight-accent: #b6e4ff;
}
#btn-sight.on .sight-core,
#btn-sight.active .sight-core {
  border-color: rgba(160, 220, 255, 0.7);
  background:
    radial-gradient(circle at 35% 28%, rgba(180, 220, 255, 0.28), transparent 52%),
    linear-gradient(160deg, rgba(28, 56, 88, 0.95), rgba(12, 20, 32, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(200, 230, 255, 0.22),
    0 0 0 1px rgba(80, 160, 220, 0.25),
    0 0 28px rgba(60, 150, 240, 0.4);
}
#btn-sight.on .sight-aura,
#btn-sight.active .sight-aura {
  opacity: 1;
  animation: sightAuraPulse 1.5s ease-in-out infinite;
}
#btn-sight.on .sight-label,
#btn-sight.active .sight-label { color: #fff; }
#btn-sight.on .sight-zoom,
#btn-sight.active .sight-zoom { color: #d8f0ff; }
@keyframes sightAuraPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ?? overlay ADS (blend 0..1) ?? */
#scope-overlay {
  --blend: 0;
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: calc(var(--blend) * 1);
  visibility: hidden;
}
#scope-overlay.on { visibility: visible; }
#scope-overlay .so-vignette {
  position: absolute;
  inset: 0;
  /* escurece fora do tubo; abertura controlada pelo mode */
  background: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent var(--hole, 34%),
    rgba(0, 0, 0, 0.55) var(--soft, 42%),
    rgba(0, 0, 0, 0.92) var(--edge, 52%),
    rgba(0, 0, 0, 0.97) 100%
  );
}
#scope-overlay.mode-scope {
  --hole: 32%;
  --soft: 38%;
  --edge: 46%;
}
#scope-overlay.mode-reddot {
  --hole: 48%;
  --soft: 58%;
  --edge: 72%;
}
#scope-overlay .so-tube {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(72vmin, 540px);
  height: min(72vmin, 540px);
  transform: translate(-50%, -50%) scale(calc(1.08 - var(--blend) * 0.08));
  border-radius: 50%;
  pointer-events: none;
}
#scope-overlay.mode-reddot .so-tube {
  width: min(42vmin, 320px);
  height: min(42vmin, 320px);
}
#scope-overlay .so-metal {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 11px solid #14161a;
  box-shadow:
    inset 0 0 0 2px rgba(90, 98, 108, 0.55),
    inset 0 0 0 5px rgba(20, 22, 26, 0.9),
    inset 0 0 36px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(0, 0, 0, 0.35);
}
#scope-overlay.mode-reddot .so-metal {
  border-width: 5px;
  box-shadow:
    inset 0 0 0 1px rgba(120, 130, 140, 0.45),
    inset 0 0 18px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(0, 0, 0, 0.25);
  opacity: 0.9;
}
#scope-overlay .so-glass {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%,
      rgba(190, 220, 255, 0.16),
      transparent 42%),
    radial-gradient(circle at 70% 74%,
      rgba(100, 50, 140, 0.07),
      transparent 40%),
    radial-gradient(circle at 50% 50%,
      transparent 55%,
      rgba(0, 0, 0, 0.18) 100%);
  box-shadow: inset 0 0 0 1px rgba(160, 180, 200, 0.18);
}
#scope-overlay.mode-reddot .so-glass {
  inset: 7px;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(200, 230, 255, 0.12),
      transparent 50%),
    radial-gradient(circle at 50% 50%,
      transparent 60%,
      rgba(0, 0, 0, 0.12) 100%);
}
/* reticle da luneta */
#scope-overlay .so-cross {
  position: absolute;
  inset: 0;
  opacity: 1;
}
#scope-overlay.mode-reddot .so-cross { display: none; }
#scope-overlay .so-h,
#scope-overlay .so-v {
  position: absolute;
  background: rgba(10, 12, 14, 0.88);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.22);
}
#scope-overlay .so-h {
  left: 16%; right: 16%; top: 50%;
  height: 1.5px; margin-top: -0.75px;
}
#scope-overlay .so-v {
  top: 16%; bottom: 16%; left: 50%;
  width: 1.5px; margin-left: -0.75px;
}
#scope-overlay .so-c {
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
#scope-overlay .so-m {
  position: absolute;
  background: rgba(12, 14, 16, 0.82);
  box-shadow: 0 0 0 0.4px rgba(255, 255, 255, 0.18);
}
#scope-overlay .so-m.m1 { left: 50%; top: 34%; width: 8px; height: 1.5px; margin-left: -4px; }
#scope-overlay .so-m.m2 { left: 50%; top: 66%; width: 8px; height: 1.5px; margin-left: -4px; }
#scope-overlay .so-m.m3 { top: 50%; left: 34%; height: 8px; width: 1.5px; margin-top: -4px; }
#scope-overlay .so-m.m4 { top: 50%; left: 66%; height: 8px; width: 1.5px; margin-top: -4px; }
/* ponto vermelho (red-dot e centro da luneta) */
#scope-overlay .so-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #ff2a1a;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(255, 40, 20, 0.7),
    0 0 18px rgba(255, 40, 20, 0.35);
  opacity: 0;
}
#scope-overlay.mode-reddot .so-dot { opacity: 1; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
#scope-overlay.mode-scope .so-dot { opacity: 0.9; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; }

/* ADS: crosshair cl�ssico some; drop mark fica (queda real) */
#game-hud.sight-ads .crosshair {
  opacity: 0 !important;
  visibility: hidden !important;
}
/* ADS: vinheta da luneta (z-index 30) NÃO cobre o HUD */
#game-hud .topbar {
  position: absolute; /* NÃO relative — relative + fundo criava faixa preta */
  z-index: 40;
}
#game-hud .power-dock { z-index: 45; }
#btn-sight { z-index: 81; }
/* contagem regressiva do tiro sempre na frente da mira */
#shot-timer { z-index: 45; }
/* realça o vento em ADS */
#game-hud.sight-ads .wind-readout {
  box-shadow: 0 0 0 1px rgba(255,200,90,0.4), 0 0 14px rgba(255,180,60,0.25);
  border-radius: 8px;
}
#game-hud.sight-ads .drop-mark {
  /* bolinha de queda por cima da reticle */
  z-index: 32;
  border-color: rgba(255, 220, 120, 0.95);
  background: rgba(20, 16, 8, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 8px rgba(255, 200, 80, 0.35);
}
#game-hud.replaying #btn-sight,
#game-hud.inspecting #btn-sight,
#game-hud.arrow-cam #btn-sight {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#game-hud.replaying #scope-overlay,
#game-hud.inspecting #scope-overlay,
#game-hud.arrow-cam #scope-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
}

#game-hud .help {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.38);
  font: 11px/1.4 system-ui, sans-serif;
  text-align: center;
  white-space: nowrap;
}

/* drop reticle clássico — bolinha preta sob o X (centro = mesmo do crosshair) */
#game-hud .drop-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 1.5px solid #111;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  /* JS só aplica translateY(px) — sem double -50% */
  transform: translateY(0);
}
#game-hud .drop-mark.on { opacity: 0.95; }

/* �"?�"? botão zoom no alvo (minimalista, junto aos opts) �"?�"? */
#btn-inspect-target {
  appearance: none;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 4px 6px !important;
  min-width: 0;
  height: auto;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  transition: opacity 0.15s, transform 0.12s, color 0.15s;
}
#btn-inspect-target:hover {
  background: transparent !important;
  opacity: 1;
  color: #fff;
  transform: scale(1.06);
}
#btn-inspect-target:active { transform: scale(0.96); }
#btn-inspect-target.active {
  background: transparent !important;
  border: none !important;
  color: #fff;
  opacity: 1;
}
#btn-inspect-target .zoom-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* só anéis minimalistas, sem fundo sólido */
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 14%,
      rgba(255,255,255,0.92) 14% 16%,
      transparent 16% 32%,
      rgba(255,255,255,0.75) 32% 34%,
      transparent 34% 50%,
      rgba(255,255,255,0.65) 50% 52%,
      transparent 52% 68%,
      rgba(255,255,255,0.55) 68% 70%,
      transparent 70% 86%,
      rgba(255,255,255,0.9) 86% 100%);
  box-shadow: none;
}
#btn-inspect-target .zoom-label {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}
#btn-inspect-target:hover .zoom-label,
#btn-inspect-target.active .zoom-label { opacity: 1; }
#btn-inspect-target.active .zoom-icon {
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 14%,
      rgba(255,210,180,0.95) 14% 16%,
      transparent 16% 32%,
      rgba(255,210,180,0.8) 32% 34%,
      transparent 34% 50%,
      rgba(255,210,180,0.7) 50% 52%,
      transparent 52% 68%,
      rgba(255,210,180,0.6) 68% 70%,
      transparent 70% 86%,
      rgba(255,220,190,0.95) 86% 100%);
}

/* �"?�"? botão replay do último tiro (ao lado do zoom) �"?�"? */
#btn-replay-shot {
  appearance: none;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 4px 6px !important;
  min-width: 0;
  height: auto;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  transition: opacity 0.15s, transform 0.12s, color 0.15s;
}
#btn-replay-shot:hover:not(:disabled) {
  opacity: 1;
  color: #fff;
  transform: scale(1.06);
}
#btn-replay-shot:active:not(:disabled) { transform: scale(0.96); }
#btn-replay-shot:disabled {
  opacity: 0.28;
  cursor: default;
  transform: none;
}
#btn-replay-shot.active {
  color: #fff;
  opacity: 1;
}
#btn-replay-shot .replay-icon {
  width: 26px;
  height: 26px;
  display: block;
}
#btn-replay-shot .replay-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#btn-replay-shot .replay-label {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}
#btn-replay-shot:hover:not(:disabled) .replay-label,
#btn-replay-shot.active .replay-label { opacity: 1; }
#btn-replay-shot.active .replay-icon {
  color: rgba(255, 210, 180, 0.95);
}

/* �"?�"? botão mão (destro / canhoto) — mesmo design zoom/replay �"?�"? */
#btn-hand {
  appearance: none;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 4px 6px !important;
  min-width: 0;
  height: auto;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  transition: opacity 0.15s, transform 0.12s, color 0.15s;
}
#btn-hand:hover {
  background: transparent !important;
  opacity: 1;
  color: #fff;
  transform: scale(1.06);
}
#btn-hand:active { transform: scale(0.96); }
#btn-hand.active {
  color: #fff;
  opacity: 1;
}
#btn-hand .hand-icon {
  width: 26px;
  height: 26px;
  display: block;
}
#btn-hand .hand-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#btn-hand .hand-label {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}
#btn-hand:hover .hand-label,
#btn-hand.active .hand-label { opacity: 1; }
/* canhoto: tom dourado + espelha o ícone da mão */
#btn-hand.active .hand-icon {
  color: rgba(255, 210, 180, 0.95);
  transform: scaleX(-1);
}

/* �"?�"? botão girar (cant) — mesmo design zoom/replay �"?�"? */
#btn-cant-mode {
  appearance: none;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 4px 6px !important;
  min-width: 0;
  height: auto;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  transition: opacity 0.15s, transform 0.12s, color 0.15s;
}
#btn-cant-mode:hover {
  background: transparent !important;
  opacity: 1;
  color: #fff;
  transform: scale(1.06);
}
#btn-cant-mode:active { transform: scale(0.96); }
#btn-cant-mode.active {
  color: #ffe08a !important;
  opacity: 1;
  background: transparent !important;
  border: none !important;
}
#btn-cant-mode .cant-icon {
  width: 26px;
  height: 26px;
  display: block;
}
#btn-cant-mode .cant-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#btn-cant-mode .cant-label {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.75;
}
#btn-cant-mode:hover .cant-label,
#btn-cant-mode.active .cant-label { opacity: 1; }
#btn-cant-mode.active .cant-icon {
  color: #ffe08a;
}

/* �"?�"? replay bar (limpo) �"?�"? */
#replay-bar {
  --rb-fg: #f4f4f5;
  --rb-muted: rgba(255,255,255,0.5);
  --rb-fill: #f4f4f5;
  --rb-track: rgba(255,255,255,0.16);
  --rb-slow: #7dd3fc;
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(8px);
  width: min(480px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(12, 12, 14, 0.72);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 10px 32px rgba(0,0,0,0.4);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 40;
  user-select: none;
}
#replay-bar.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
#replay-bar button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--rb-fg);
  margin: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, opacity 0.12s, transform 0.1s;
}
#replay-bar button:active { transform: scale(0.95); }
#replay-bar button svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#rb-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
}
#rb-play:hover { background: rgba(255,255,255,0.18); }
#rb-play .ico-pause { display: none; }
#rb-play.is-playing .ico-play { display: none; }
#rb-play.is-playing .ico-pause { display: block; }
#rb-seek-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 2px;
}
#rb-seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--rb-fill) 0%,
    var(--rb-fill) var(--rb-pct, 0%),
    var(--rb-track) var(--rb-pct, 0%),
    var(--rb-track) 100%
  );
  outline: none;
  cursor: pointer;
  margin: 0;
}
#rb-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  cursor: grab;
}
#rb-seek::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  cursor: grab;
}
#rb-seek::-moz-range-track {
  height: 4px;
  background: transparent;
  border: none;
}
#rb-time {
  font: 500 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--rb-muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: nowrap;
}
#rb-slow {
  --rb-slow: #7dd3fc;
  height: 34px;
  padding: 0 10px 0 8px;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.55);
  font: 600 10px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 6px;
  min-width: 0;
  box-shadow: none !important;
  transition: color 0.15s, opacity 0.15s, transform 0.1s;
}
#rb-slow .slow-ico {
  width: 20px;
  height: 20px;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: transparent !important;
  flex-shrink: 0;
  color: inherit;
}
#rb-slow svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.9;
}
#rb-slow .slow-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
}
#rb-slow .slow-label {
  font: 600 10px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.12em;
  color: inherit;
}
#rb-slow .slow-hint {
  font: 500 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  opacity: 0.65;
  text-transform: none;
  color: inherit;
}
#rb-slow:hover {
  color: rgba(255,255,255,0.92);
  background: transparent !important;
}
#rb-slow:hover .slow-ico {
  background: transparent !important;
  color: inherit;
}
#rb-slow.is-on {
  color: var(--rb-slow);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#rb-slow.is-on .slow-ico {
  background: transparent !important;
  color: inherit;
}
#rb-slow.is-on .slow-hint {
  opacity: 0.85;
  color: inherit;
}
#rb-slow.is-on:hover {
  color: #a8e4ff;
  filter: none;
  background: transparent !important;
}
#rb-exit {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--rb-muted);
}
#rb-exit:hover {
  color: #fda4af;
  background: rgba(251, 113, 133, 0.12);
}
#game-hud.replaying .crosshair,
#game-hud.replaying .drop-mark,
#game-hud.replaying .power-dock,
#game-hud.replaying .help,
#game-hud.replaying #btn-hand,
#game-hud.replaying #btn-cant-mode,
#game-hud.replaying #btn-exit-game {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* topbar + zoom/replay: permanecem no tiro, arrow-cam e replay (mobile e desktop) */
#game-hud.replaying .topbar,
#game-hud.arrow-cam .topbar,
#game-hud.replaying .phase-info,
#game-hud.arrow-cam .phase-info,
#game-hud.replaying .stats,
#game-hud.arrow-cam .stats,
#game-hud.replaying #goal-meter,
#game-hud.arrow-cam #goal-meter,
#game-hud.replaying #btn-inspect-target,
#game-hud.replaying #btn-replay-shot,
#game-hud.arrow-cam #btn-inspect-target,
#game-hud.arrow-cam #btn-replay-shot,
#game-hud.replaying #game-opts,
#game-hud.arrow-cam #game-opts {
  opacity: 1 !important;
  visibility: visible !important;
}
#game-hud.replaying #btn-inspect-target,
#game-hud.replaying #btn-replay-shot,
#game-hud.arrow-cam #btn-inspect-target,
#game-hud.arrow-cam #btn-replay-shot,
#game-hud.replaying #game-opts,
#game-hud.arrow-cam #game-opts {
  pointer-events: auto !important;
}
/* durante replay: canvas não recebe clique (só a barra #replay-bar + zoom/replay) */
body.replaying canvas {
  pointer-events: none !important;
}
body.replaying #replay-bar {
  pointer-events: auto !important;
}
#game-hud.inspecting .crosshair,
#game-hud.inspecting .drop-mark,
#game-hud.inspecting .power-dock,
#game-hud.arrow-cam .crosshair,
#game-hud.arrow-cam .drop-mark,
#game-hud.arrow-cam .power-dock {
  opacity: 0 !important;
  pointer-events: none;
}
/* Duelo: sem mira (X/bolinha) durante intro, troca de turno e transição */
body.duel-aim-hidden #game-hud .crosshair,
body.duel-aim-hidden #game-hud .drop-mark,
body:has(#arcade-intro.show) #game-hud .crosshair,
body:has(#arcade-intro.show) #game-hud .drop-mark,
body:has(#turn-swap.show) #game-hud .crosshair,
body:has(#turn-swap.show) #game-hud .drop-mark {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#inspect-hint {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  font: 500 12px/1.4 system-ui, sans-serif;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 8px 14px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}
#game-hud.inspecting #inspect-hint {
  opacity: 1;
  visibility: visible;
}

/* �"?�"? pegar o arco (posição FIXA — sempre clicável) �"?�"? */
#bow-grab {
  --grab-accent: #f0d2b0;
  position: absolute;
  left: 50%;
  bottom: 120px;
  width: 72px;
  height: 72px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 80;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.4));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#bow-grab.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
  animation: bowGrabBob 2.6s ease-in-out infinite;
}
#bow-grab .grab-core {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.22), transparent 52%),
    linear-gradient(160deg, rgba(36, 34, 32, 0.82), rgba(12, 12, 14, 0.78));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 0 1px rgba(0,0,0,0.25),
    0 0 24px rgba(240, 210, 176, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s;
}
#bow-grab .grab-aura {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(240, 210, 176, 0.22) 0%, transparent 68%);
  animation: bowGrabAura 2.6s ease-in-out infinite;
}
#bow-grab .grab-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  pointer-events: none;
  border: 1.5px solid rgba(240, 210, 176, 0.35);
  animation: bowGrabRing 2.6s ease-in-out infinite;
}
#bow-grab .grab-core svg {
  width: 30px;
  height: 30px;
  display: block;
  color: var(--grab-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
  transition: transform 0.2s ease, color 0.15s;
  position: relative;
  z-index: 1;
}
#bow-grab:hover .grab-core {
  transform: scale(1.07);
  border-color: rgba(240, 210, 176, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 0 0 1px rgba(0,0,0,0.2),
    0 0 28px rgba(240, 210, 176, 0.28);
}
#bow-grab:hover .grab-core svg {
  color: #fff6eb;
  transform: scale(1.05);
}
#bow-grab:active .grab-core {
  transform: scale(0.95);
}
#bow-grab.show:hover {
  animation: none;
  transform: translateX(-50%) scale(1.04);
}
@keyframes bowGrabBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}
@keyframes bowGrabAura {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes bowGrabRing {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 0.2; transform: scale(1.12); }
}
#game-hud.replaying #bow-grab,
#game-hud.arrow-cam #bow-grab,
#game-hud.inspecting #bow-grab,
#game-hud.replaying #bow-draw,
#game-hud.arrow-cam #bow-draw,
#game-hud.inspecting #bow-draw {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* �"?�"? puxar a corda (posição FIXA, grande, sempre clicável) �"?�"? */
#bow-draw {
  --draw-accent: #7ec8ff;
  --timer-pct: 1;          /* 1 = tempo cheio, 0 = acabou */
  --timer-color: #5eead4;  /* cor da borda (muda com urgência) */
  --timer-glow: rgba(94, 234, 212, 0.45);
  position: absolute;
  left: 50%;
  bottom: 120px;
  width: 96px;
  height: 96px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 80;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.4));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#bow-draw.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
  animation: bowDrawPulse 2.2s ease-in-out infinite;
}
#bow-draw .draw-core {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.2), transparent 52%),
    linear-gradient(160deg, rgba(28, 40, 56, 0.88), rgba(10, 14, 22, 0.82));
  border: 1px solid color-mix(in srgb, var(--timer-color) 55%, transparent);
  /* sem brilho externo — só sombra leve de profundidade */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 0 1px rgba(0,0,0,0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.12s ease, border-color 0.15s;
}
/* anel de tempo restante em volta do ícone */
#bow-draw .draw-timer-svg {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  transform: rotate(-90deg);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
#bow-draw .draw-timer-svg circle {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
}
#bow-draw .draw-timer-track {
  stroke: rgba(255,255,255,0.12);
}
#bow-draw .draw-timer-fill {
  stroke: var(--timer-color);
  stroke-dasharray: 251.3; /* 2�?·40 */
  stroke-dashoffset: 0;
  filter: none; /* sem glow no anel */
  transition: stroke 0.12s linear;
}
/* brilho externo desligado — não precisa */
#bow-draw .draw-timer-glow {
  display: none !important;
}
#bow-draw .draw-core > svg.draw-icon {
  width: 30px;
  height: 30px;
  color: var(--draw-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
  position: relative;
  z-index: 1;
  transition: color 0.12s ease;
}
#bow-draw:hover .draw-core {
  transform: scale(1.06);
}
#bow-draw:active .draw-core,
#bow-draw.is-pulling .draw-core {
  transform: scale(0.94);
}
#bow-draw.is-pulling {
  animation: none;
}
#bow-draw.is-pulling .draw-timer-fill {
  stroke-width: 3.4;
  filter: none;
}
#bow-draw.is-pulling .draw-core > svg.draw-icon {
  color: var(--timer-color);
}
#bow-draw.is-urgent {
  --timer-color: #fbbf24;
  --timer-glow: transparent;
  --draw-accent: #fbbf24;
}
#bow-draw.is-critical {
  --timer-color: #fb7185;
  --timer-glow: transparent;
  --draw-accent: #fb7185;
}
@keyframes bowDrawPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.04); }
}

/* �"?�"? contagem do tiro �"?�"? */
#shot-timer {
  position: absolute;
  top: 78px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  /* acima da vinheta da mira (z=30) e do tubo */
  z-index: 45;
}
#shot-timer.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
#shot-timer .st-ring {
  width: 54px;
  height: 54px;
  position: relative;
  display: grid;
  place-items: center;
}
#shot-timer .st-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
#shot-timer .st-ring circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
#shot-timer .st-track { stroke: rgba(255,255,255,0.12); }
#shot-timer .st-fill {
  stroke: #f4f4f5;
  stroke-dasharray: 138.2;
  stroke-dashoffset: 0;
  transition: stroke 0.15s ease;
}
#shot-timer.is-urgent .st-fill { stroke: #fbbf24; }
#shot-timer.is-critical .st-fill { stroke: #fb7185; }
#shot-timer .st-num {
  font: 600 18px/1 system-ui, -apple-system, sans-serif;
  color: #fff;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
#shot-timer .st-label {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
#game-hud.replaying #shot-timer,
#game-hud.arrow-cam #shot-timer,
#game-hud.inspecting #shot-timer {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* �"?�"? intro cinematográfica �"?�"? */
#cine-caption {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 12%;
  z-index: 40;
  pointer-events: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, visibility 0.55s;
  font-family: system-ui, -apple-system, sans-serif;
}
#cine-caption.show {
  opacity: 1;
  visibility: visible;
}
#cine-caption .cine-tag {
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}
#cine-caption .cine-title {
  font: 600 28px/1.15 system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 4px 28px rgba(0,0,0,0.55);
}
#cine-caption .cine-line {
  width: 48px;
  height: 1px;
  margin: 14px auto 0;
  background: rgba(255,255,255,0.35);
}
/* Pular: centralizado abaixo do texto */
#cine-skip {
  position: static;
  z-index: 41;
  appearance: none;
  margin: 22px auto 0;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
  font: 600 12px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 22px 12px 18px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.4s ease,
    visibility 0.4s,
    transform 0.35s ease,
    color 0.15s,
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.2s ease;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  box-shadow: none;
}
#cine-skip.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
#cine-skip:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
#cine-skip:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.12);
}
#cine-skip .cine-skip-ico {
  width: 15px;
  height: 15px;
  display: block;
  flex-shrink: 0;
  opacity: 0.9;
}
#cine-skip .cine-skip-ico svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}
#cine-skip .cine-skip-lbl {
  display: inline;
}
body.cinematic #game-hud {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* �"?�"? painel de comando profissional �"?�"? */

/* �"?�"? pontuação flutuante: número em destaque, sobe e some SEM paradas �"?�"? */
#game-hud .hit-toast {
  position: absolute;
  left: 50%;
  top: 36%;
  /* estado parado (sem .show) — animação controla transform+opacity */
  transform: translate3d(-50%, 0, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  margin: 0;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font: 900 78px/0.95 "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: -0.03em;
  color: #fff;
  -webkit-text-stroke: 1.5px rgba(0,0,0,0.35);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.25),
    0 3px 0 rgba(0,0,0,0.35),
    0 8px 24px rgba(0,0,0,0.65),
    0 0 48px rgba(255, 220, 100, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  white-space: nowrap;
  /* só transform+opacity — NUNCA filter (stutter no compositor) */
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout style;
}
#game-hud .hit-toast.show {
  /* linear = velocidade constante do início ao fim */
  animation: scoreFloatUp 1.35s linear forwards;
}
#game-hud .hit-toast.miss {
  color: rgba(255,255,255,0.72);
  font-size: 36px;
  font-weight: 700;
  -webkit-text-stroke: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: 0 3px 16px rgba(0,0,0,0.55);
}
#game-hud .hit-toast.miss.show {
  animation: scoreFloatMiss 1.1s linear forwards;
}
#game-hud .hit-toast.pts-100 {
  color: #ffe566;
  font-size: 92px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.4),
    0 3px 0 rgba(120, 60, 0, 0.45),
    0 0 28px rgba(255, 210, 40, 0.9),
    0 10px 40px rgba(0,0,0,0.55);
}
#game-hud .hit-toast.pts-80 {
  color: #ff7a6a;
  font-size: 84px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow:
    0 1px 0 rgba(255,200,190,0.35),
    0 3px 0 rgba(80,0,0,0.4),
    0 0 26px rgba(255,90,70,0.75),
    0 8px 32px rgba(0,0,0,0.5);
}
#game-hud .hit-toast.pts-60 {
  color: #7ed0ff;
  font-size: 80px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow:
    0 1px 0 rgba(200,240,255,0.35),
    0 3px 0 rgba(0,40,80,0.4),
    0 0 26px rgba(90,190,255,0.7),
    0 8px 32px rgba(0,0,0,0.5);
}
#game-hud .hit-toast.pts-40 {
  color: #7dff9a;
  font-size: 78px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow:
    0 1px 0 rgba(220,255,230,0.3),
    0 3px 0 rgba(0,50,20,0.35),
    0 0 22px rgba(80,230,130,0.65),
    0 8px 32px rgba(0,0,0,0.5);
}
#game-hud .hit-toast.pts-20,
#game-hud .hit-toast.pts-10 {
  color: #fff;
  font-size: 74px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.3),
    0 3px 0 rgba(0,0,0,0.4),
    0 0 24px rgba(255,255,255,0.35),
    0 8px 32px rgba(0,0,0,0.55);
}
#game-hud .hit-toast.pts-rh {
  color: #ffd76a;
  font-size: 80px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.45),
    0 3px 0 rgba(100, 50, 0, 0.5),
    0 0 32px rgba(255, 190, 50, 0.95),
    0 10px 40px rgba(0,0,0,0.55);
}
#game-hud .hit-toast .pts-num {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 0.95;
}
#game-hud .hit-toast .pts-plus {
  font-size: 0.48em;
  font-weight: 800;
  margin-right: 4px;
  margin-top: 0.12em;
  opacity: 0.95;
  -webkit-text-stroke: 0.8px rgba(0,0,0,0.3);
}
#game-hud .hit-toast .pts-label {
  display: block;
  margin-top: 2px;
  font: 700 14px/1.2 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
  -webkit-text-stroke: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
/*
  SUBIDA CONTÍNUA:
  - transform só em 0% e 100% �?' velocidade Y constante (sem �?osobe/para�?�)
  - scale FIXO (sem bounce)
  - opacity: aparece rápido �?' fica �?' some no final (não mexe no movimento)
*/
@keyframes scoreFloatUp {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0px, 0);
  }
  8% {
    opacity: 1;
  }
  62% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -170px, 0);
  }
}
@keyframes scoreFloatMiss {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0px, 0);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -100px, 0);
  }
}
/* flash de tela no acerto */
#score-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 55;
  opacity: 0;
  background: radial-gradient(ellipse 55% 45% at 50% 38%, rgba(255, 240, 160, 0.28), transparent 70%);
}
#score-flash.on {
  animation: scoreScreenFlash 0.55s ease-out forwards;
}
#score-flash.flash-100 {
  background: radial-gradient(ellipse 60% 50% at 50% 38%, rgba(255, 220, 60, 0.4), transparent 72%);
}
#score-flash.flash-80 {
  background: radial-gradient(ellipse 55% 45% at 50% 38%, rgba(255, 100, 80, 0.28), transparent 70%);
}
#score-flash.flash-rh {
  background: radial-gradient(ellipse 65% 55% at 50% 38%, rgba(255, 200, 50, 0.42), transparent 75%);
}
@keyframes scoreScreenFlash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}
/* partículas extras de pontos flutuantes */
#score-float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 88;
  overflow: hidden;
}
#score-float-layer .score-pop {
  position: absolute;
  left: 50%;
  top: 38%;
  font: 900 32px/1 system-ui, sans-serif;
  color: #ffe566;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.4),
    0 0 16px currentColor,
    0 4px 18px rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  animation: scorePopDrift 1.35s cubic-bezier(0.15, 0.85, 0.25, 1) forwards;
}
#score-float-layer .score-pop.chip {
  font-size: 22px;
  font-weight: 900;
  padding: 0;
  background: none;
  border: none;
  -webkit-text-stroke: 0.8px rgba(0,0,0,0.35);
}
@keyframes scorePopDrift {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), 10%) scale(0.3);
  }
  14% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy0, 0px))) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx2, 0px)), calc(-50% + var(--dy1, -100px))) scale(0.75);
  }
}
/* pulso no placar do HUD */
#game-hud .stats b.score-bump {
  animation: scoreHudBump 0.55s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes scoreHudBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); color: #ffe566; }
  100% { transform: scale(1); }
}
/* fim de partida: acima do HUD de duelo (z 55–60) e turn-swap (58) */
#game-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, sans-serif;
  background: transparent;
  overflow: hidden;
  pointer-events: auto;
}
#game-overlay.active {
  display: flex;
}
#game-overlay .ov-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(0,0,0,0.25), transparent 70%),
    rgba(4, 6, 10, 0.62);
  backdrop-filter: blur(10px) saturate(0.85);
  -webkit-backdrop-filter: blur(10px) saturate(0.85);
  opacity: 0;
  animation: ovVeilIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#game-overlay.pass .ov-veil {
  background:
    radial-gradient(ellipse 55% 45% at 50% 42%, rgba(255, 200, 60, 0.14), transparent 65%),
    rgba(4, 6, 10, 0.58);
}
#game-overlay.fail .ov-veil {
  background:
    radial-gradient(ellipse 55% 45% at 50% 42%, rgba(251, 80, 100, 0.12), transparent 65%),
    rgba(4, 6, 10, 0.62);
}
@keyframes ovVeilIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
#game-overlay .ov-burst {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
#game-overlay.active .ov-burst {
  animation: ovBurst 1.1s cubic-bezier(0.12, 0.85, 0.25, 1) 0.1s forwards;
}
#game-overlay.pass .ov-burst {
  box-shadow:
    0 0 0 2px rgba(255, 220, 100, 0.5),
    0 0 80px 40px rgba(255, 200, 60, 0.2),
    0 0 160px 80px rgba(255, 180, 40, 0.1);
}
#game-overlay.fail .ov-burst {
  box-shadow:
    0 0 0 2px rgba(251, 113, 133, 0.4),
    0 0 70px 36px rgba(200, 40, 70, 0.15),
    0 0 140px 70px rgba(120, 20, 40, 0.1);
}
@keyframes ovBurst {
  0% { opacity: 0; transform: scale(0.2); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(18); }
}
#game-overlay .ov-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
#game-overlay .ov-particle {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffe566;
  opacity: 0;
  animation: ovParticle 1.4s cubic-bezier(0.15, 0.85, 0.25, 1) forwards;
}
#game-overlay.fail .ov-particle {
  background: #fb7185;
}
@keyframes ovParticle {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0.2);
  }
}
/* conteúdo central — sem caixa */
#game-overlay .card {
  position: relative;
  z-index: 2;
  width: min(440px, 90vw);
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff;
  text-align: center;
  pointer-events: auto;
}
#game-overlay .card .ov-kicker {
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(12px);
}
#game-overlay.active .card .ov-kicker {
  animation: ovRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
#game-overlay .card h2 {
  font: 800 34px/1.1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  opacity: 0;
  transform: translateY(18px) scale(0.94);
  text-shadow: 0 4px 28px rgba(0,0,0,0.55);
}
#game-overlay.active .card h2 {
  animation: ovTitleIn 0.85s cubic-bezier(0.18, 0.9, 0.28, 1) 0.28s forwards;
}
#game-overlay .card p {
  color: rgba(255,255,255,0.62);
  font: 400 15px/1.55 system-ui, sans-serif;
  margin: 0 auto 22px;
  max-width: 34ch;
  opacity: 0;
  transform: translateY(14px);
}
#game-overlay.active .card p {
  animation: ovRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.42s forwards;
}
#game-overlay .card .scoreline {
  font: 800 56px/1 system-ui, sans-serif;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: scale(0.5);
  text-shadow: 0 6px 36px rgba(0,0,0,0.5);
}
#game-overlay.active .card .scoreline {
  animation: ovScoreIn 0.95s cubic-bezier(0.16, 0.9, 0.28, 1) 0.5s forwards;
}
#game-overlay .card .meta-line {
  font: 600 12px/1.4 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(10px);
}
#game-overlay.active .card .meta-line {
  animation: ovRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards;
}
#game-overlay .card.pass .scoreline,
#game-overlay.pass .card .scoreline {
  color: #ffe566;
  text-shadow:
    0 0 32px rgba(255, 210, 60, 0.55),
    0 6px 36px rgba(0,0,0,0.5);
}
#game-overlay .card.fail .scoreline,
#game-overlay.fail .card .scoreline {
  color: #fb7185;
  text-shadow:
    0 0 28px rgba(251, 100, 120, 0.4),
    0 6px 36px rgba(0,0,0,0.5);
}
#game-overlay .card.pass h2,
#game-overlay.pass .card h2 {
  color: #ffe566;
}
#game-overlay .card.fail h2,
#game-overlay.fail .card h2 {
  color: #fb7185;
}
#game-overlay.pass .card .ov-kicker { color: rgba(255, 220, 100, 0.7); }
#game-overlay.fail .card .ov-kicker { color: rgba(251, 140, 150, 0.65); }
@keyframes ovRise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ovTitleIn {
  0% { opacity: 0; transform: translateY(22px) scale(0.9); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes ovScoreIn {
  0% { opacity: 0; transform: scale(0.4); filter: blur(6px); }
  55% { opacity: 1; transform: scale(1.12); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
#game-overlay .card .actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  width: min(280px, 86vw);
  margin: 0 auto;
  opacity: 0;
  transform: translateY(16px);
}
#game-overlay.active .card .actions {
  animation: ovRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}

/* �"?�"? meta da fase: ao lado do tempo (sem fundo/borda de card) �"?�"? */
#goal-meter {
  position: relative;
  left: auto;
  top: auto;
  width: min(220px, 38vw);
  min-width: 170px;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
  z-index: 36;
  opacity: 0;
  font-family: system-ui, -apple-system, sans-serif;
  color: #fff;
  /* sem transition de transform — animações de efeito precisam controlar */
}
#game-hud.active #goal-meter {
  opacity: 1;
}
/* meta some só no zoom/inspeção do alvo — no tiro e no replay fica */
#game-hud.inspecting #goal-meter {
  opacity: 0 !important;
  visibility: hidden;
}
#goal-meter .gm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
#goal-meter .gm-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 9px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
#goal-meter .gm-label svg {
  width: 13px;
  height: 13px;
  color: #ffe566;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}
#goal-meter .gm-label svg path,
#goal-meter .gm-label svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#goal-meter .gm-nums {
  font: 700 12px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
#goal-meter .gm-nums .gm-cur {
  color: #ffe566;
  font-size: 14px;
}
#goal-meter .gm-nums .gm-sep {
  opacity: 0.4;
  margin: 0 2px;
}
#goal-meter .gm-nums .gm-goal {
  opacity: 0.75;
}
#goal-meter .gm-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: none;
  overflow: visible;
  box-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
#goal-meter .gm-track-clip {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;
}
#goal-meter .gm-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #3a7bb8 0%,
    #6ec8ff 28%,
    #7dff9a 55%,
    #ffe566 82%,
    #ffb830 100%);
  box-shadow:
    0 0 18px rgba(255, 210, 80, 0.55),
    inset 0 1px 0 rgba(255,255,255,0.4);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width, filter, box-shadow;
}
#goal-meter .gm-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  bottom: -3px;
  width: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  filter: blur(5px);
  opacity: 0.9;
}
#goal-meter .gm-overfill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 40%, #fff 100%);
  mix-blend-mode: screen;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
#goal-meter .gm-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 35%,
    rgba(255,255,255,0.35) 50%,
    transparent 65%);
  background-size: 220% 100%;
  animation: gmShine 2.4s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: soft-light;
}
@keyframes gmShine {
  0% { background-position: 130% 0; }
  100% { background-position: -50% 0; }
}
#goal-meter .gm-ripple {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 230, 100, 0.95);
  box-shadow: 0 0 12px rgba(255, 210, 60, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
#goal-meter .gm-sparks {
  position: absolute;
  inset: -18px -10px;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}
#goal-meter .gm-spark {
  position: absolute;
  left: var(--sx, 85%);
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #ffe566;
  box-shadow: 0 0 10px 2px currentColor;
  opacity: 0;
  animation: gmSparkFly 0.85s cubic-bezier(0.15, 0.85, 0.25, 1) forwards;
}
@keyframes gmSparkFly {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }
  12% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 0px), var(--dy, -28px)) scale(0.15);
  }
}

/* flash na barra a CADA pontuação */
#goal-meter.score-hit .gm-fill {
  animation: gmScoreHit 0.55s cubic-bezier(0.2, 0.9, 0.3, 1);
}
#goal-meter.score-hit .gm-track {
  animation: gmTrackKick 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes gmScoreHit {
  0% { filter: brightness(1); box-shadow: 0 0 12px rgba(255, 210, 80, 0.4); }
  35% { filter: brightness(1.75); box-shadow: 0 0 28px rgba(255, 230, 100, 0.95), 0 0 48px rgba(255, 180, 40, 0.45); }
  100% { filter: brightness(1); box-shadow: 0 0 16px rgba(255, 210, 80, 0.5); }
}
@keyframes gmTrackKick {
  0% { transform: scaleY(1); }
  40% { transform: scaleY(1.55); }
  100% { transform: scaleY(1); }
}
#goal-meter .gm-marks {
  position: relative;
  height: 18px;
  margin-top: 6px;
}
#goal-meter .gm-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
#goal-meter .gm-mark .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1.5px solid rgba(255,255,255,0.25);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
#goal-meter .gm-mark .cap {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.35);
  transition: color 0.3s;
}
#goal-meter .gm-mark.on .dot {
  background: #ffe566;
  border-color: #fff2a8;
  box-shadow: 0 0 10px rgba(255, 210, 60, 0.75);
  transform: scale(1.15);
}
#goal-meter .gm-mark.on .cap {
  color: rgba(255, 230, 120, 0.9);
}
#goal-meter .gm-mark.goal .dot {
  width: 9px;
  height: 9px;
}
#goal-meter.is-hot .gm-fill {
  box-shadow:
    0 0 22px rgba(255, 200, 40, 0.65),
    0 0 40px rgba(255, 180, 40, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
#goal-meter.is-pass {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}
#goal-meter.is-pass .gm-fill {
  background: linear-gradient(90deg, #ffd24a, #ffe566 40%, #fff2a8 70%, #ffe566);
  box-shadow:
    0 0 18px rgba(255, 210, 60, 0.7),
    0 0 32px rgba(255, 180, 40, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.45);
}
#goal-meter.is-pass .gm-shine {
  animation: gmShineFast 1.1s linear infinite;
}
@keyframes gmShineFast {
  0% { background-position: 120% 0; }
  100% { background-position: -40% 0; }
}
#goal-meter.is-pass .gm-label {
  color: rgba(255, 230, 120, 0.9);
}
#goal-meter.is-pass .gm-mark.goal .dot {
  animation: gmGoalDot 1.4s ease-in-out infinite;
}
@keyframes gmGoalDot {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 210, 60, 0.6); transform: scale(1.15); }
  50% { box-shadow: 0 0 16px rgba(255, 230, 100, 0.95); transform: scale(1.35); }
}

/* �"?�"? hit da meta (450) �"?�"? */
#goal-meter.meta-burst .gm-track {
  animation: gmTrackPulse 1s cubic-bezier(0.2, 0.85, 0.25, 1) !important;
}
#goal-meter.meta-burst .gm-fill {
  animation: gmMetaFill 1.15s cubic-bezier(0.18, 0.9, 0.28, 1) !important;
}
#goal-meter.meta-burst .gm-ripple {
  animation: gmRipple 0.95s cubic-bezier(0.12, 0.85, 0.25, 1) forwards !important;
}
#goal-meter.meta-burst .gm-nums .gm-cur {
  animation: gmNumFlash 1s ease-out !important;
}
#goal-meter.meta-burst .gm-mark.goal .dot {
  animation: gmGoalPop 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
}
@keyframes gmTrackPulse {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(1.08, 1.6); filter: brightness(1.5); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes gmMetaFill {
  0% { filter: brightness(1) saturate(1); }
  20% { filter: brightness(2.2) saturate(1.4); }
  50% { filter: brightness(1.4) saturate(1.2); }
  100% { filter: brightness(1) saturate(1); }
}
@keyframes gmRipple {
  0% { opacity: 1; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(5.5); }
}
@keyframes gmNumFlash {
  0% { transform: scale(1); }
  40% { transform: scale(1.55); color: #fff; text-shadow: 0 0 20px rgba(255, 230, 100, 1); }
  100% { transform: scale(1); }
}
@keyframes gmGoalPop {
  0% { transform: scale(1); }
  40% { transform: scale(2.2); box-shadow: 0 0 20px rgba(255, 230, 100, 1); }
  100% { transform: scale(1.15); }
}

/* �"?�"? além da meta �"?�"? */
#goal-meter.over-t1 .gm-fill {
  background: linear-gradient(90deg, #ffc94a 0%, #ffe566 45%, #fff6c0 100%) !important;
  animation: gmOverGlow1 1.4s ease-in-out infinite;
}
#goal-meter.over-t1 .gm-overfill {
  opacity: 0.7 !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 230, 100, 0.35) 50%,
    rgba(255, 255, 255, 0.7) 100%);
}
@keyframes gmOverGlow1 {
  0%, 100% {
    box-shadow: 0 0 16px rgba(255, 210, 60, 0.65), 0 0 28px rgba(255, 180, 40, 0.25);
    filter: brightness(1.05);
  }
  50% {
    box-shadow: 0 0 32px rgba(255, 230, 100, 1), 0 0 56px rgba(255, 180, 40, 0.45);
    filter: brightness(1.35);
  }
}
#goal-meter.over-t2 .gm-fill {
  background: linear-gradient(90deg, #7ec8ff 0%, #c4e8ff 40%, #ffe566 75%, #fff 100%) !important;
  animation: gmOverGlow2 1.1s ease-in-out infinite;
}
#goal-meter.over-t2 .gm-overfill {
  opacity: 0.9 !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(126, 200, 255, 0.45) 40%,
    rgba(255, 255, 255, 0.85) 100%);
  animation: gmOverFlow 1.1s linear infinite;
}
#goal-meter.over-t2 .gm-shine {
  animation: gmShineFast 0.7s linear infinite;
}
@keyframes gmOverGlow2 {
  0%, 100% { filter: brightness(1.1) saturate(1.15); }
  50% { filter: brightness(1.55) saturate(1.35); }
}
@keyframes gmOverFlow {
  0% { opacity: 0.45; }
  50% { opacity: 1; }
  100% { opacity: 0.45; }
}
#goal-meter.over-t3 .gm-fill {
  background: linear-gradient(90deg,
    #ff6b5a 0%,
    #ffe566 28%,
    #7dff9a 52%,
    #6ec8ff 76%,
    #fff 100%) !important;
  background-size: 220% 100%;
  animation: gmOverRainbow 1.8s linear infinite;
}
#goal-meter.over-t3 .gm-overfill {
  opacity: 1 !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0.95) 100%);
  animation: gmOverFlow 0.75s linear infinite;
}
#goal-meter.over-t3 .gm-track {
  animation: gmTrackShake 1.6s ease-in-out infinite;
}
#goal-meter.over-t3 .gm-nums .gm-cur {
  color: #fff !important;
  text-shadow: 0 0 14px rgba(255, 220, 100, 1), 0 0 26px rgba(126, 200, 255, 0.65);
}
@keyframes gmOverRainbow {
  0% { background-position: 0% 50%; filter: brightness(1.15); }
  50% { background-position: 100% 50%; filter: brightness(1.55); }
  100% { background-position: 0% 50%; filter: brightness(1.15); }
}
@keyframes gmTrackShake {
  0%, 100% { transform: translateY(0) scaleY(1); }
  25% { transform: translateY(-1px) scaleY(1.08); }
  75% { transform: translateY(1px) scaleY(1.08); }
}
#goal-meter.over-burst .gm-fill {
  animation: gmOverBurst 0.75s cubic-bezier(0.18, 0.9, 0.28, 1) !important;
}
#goal-meter.over-burst .gm-ripple {
  border-color: rgba(180, 230, 255, 1);
  animation: gmRipple 0.75s cubic-bezier(0.12, 0.85, 0.25, 1) forwards !important;
}
#goal-meter.over-burst .gm-track {
  animation: gmTrackPulse 0.65s cubic-bezier(0.2, 0.85, 0.25, 1) !important;
}
@keyframes gmOverBurst {
  0% { filter: brightness(1); }
  35% { filter: brightness(2.1); }
  100% { filter: brightness(1); }
}
#game-overlay .card button {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.28);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 0 22px;
  font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
#game-overlay .card button:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-1px);
}
#game-overlay .card button.primary {
  background: #fff;
  color: #111;
  border-color: #fff;
  text-shadow: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
#game-overlay .card button.primary:hover {
  background: #fff;
  box-shadow: 0 10px 36px rgba(255,255,255,0.2), 0 8px 28px rgba(0,0,0,0.35);
}
#game-overlay.pass .card button.primary {
  box-shadow: 0 8px 32px rgba(255, 200, 60, 0.25), 0 8px 28px rgba(0,0,0,0.3);
}
#game-overlay.fail .card button.primary {
  box-shadow: 0 8px 32px rgba(251, 100, 120, 0.18), 0 8px 28px rgba(0,0,0,0.3);
}
body.game-mode #play-menu,
body.game-mode #hint,
body.game-mode #caption { opacity: 0 !important; pointer-events: none !important; }

/* �.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.��.�
   MOBILE HUD — layout limpo
   �"O�"? tempo | meta �"?�"?�"?�"?�"?�"?�"?�"?�"�  �"O�"?�"?�"?�"?�"�
   �",  pts · flechas · últ. �",  �", X  �",  rail direito
   �",                       �",  �",zoom�",
   �",                       �",  �",rply�",
   �",                       �",  �",hand�",
   �",                       �",  �",gir �",
   �""�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"~  �""�"?�"?�"?�"?�"~
*/
/* �"?�"? Jogar (vitrine mobile): CTA embaixo, sem fundo �"?�"? */
body.is-mobile #btn-game {
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px)) !important;
  transform: translateX(-50%);
  z-index: 45;
  width: auto;
  min-width: 0;
  max-width: calc(100vw - 32px);
  height: auto;
  min-height: 48px;
  max-height: none;
  padding: 12px 18px !important;
  gap: 10px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
body.is-mobile #btn-game:hover {
  background: transparent !important;
  border: none !important;
  opacity: 1;
  transform: translateX(-50%) translateY(-1px);
}
body.is-mobile #btn-game:active {
  transform: translateX(-50%) scale(0.97);
  opacity: 0.85;
}
body.is-mobile #btn-game.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.94) translateY(10px);
}
body.is-mobile #btn-game svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* menu da vitrine + dica: não colidem com o Jogar */
body.is-mobile #play-menu {
  top: max(16px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  transform: none;
  width: min(148px, 42vw);
}
body.is-mobile #play-menu .play-main {
  padding: 2px 0 10px;
}
body.is-mobile #play-menu .play-btn-wrap {
  width: 46px;
  height: 46px;
}
body.is-mobile #play-menu .play-btn-wrap .play-progress {
  width: 46px;
  height: 46px;
}
body.is-mobile #play-menu #btn-play {
  inset: 3px;
  width: 40px;
  height: 40px;
}
body.is-mobile #play-menu #btn-play > svg.play-icon {
  width: 16px;
  height: 16px;
}
body.is-mobile #play-menu .menu-status {
  font-size: 10px;
  padding-bottom: 8px;
}
body.is-mobile #play-menu .menu-items button {
  padding: 11px 2px;
  font-size: 12px;
  gap: 10px;
}
body.is-mobile #play-menu .menu-items button .mi {
  width: 20px;
  height: 20px;
}
body.is-mobile #play-menu .menu-items button .mi svg {
  width: 18px;
  height: 18px;
}
body.is-mobile #hint {
  display: none !important;
}
body.is-mobile #caption {
  bottom: max(96px, calc(env(safe-area-inset-bottom) + 84px));
  font-size: 12px;
  letter-spacing: 0.12em;
  white-space: normal;
  max-width: 90vw;
  padding: 0 12px;
}

body.is-mobile #game-hud .topbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  padding:
    max(10px, env(safe-area-inset-top))
    max(64px, calc(env(safe-area-inset-right) + 56px))
    10px
    max(12px, env(safe-area-inset-left));
  /* sem faixa preta no topo — só um leve fade sob o texto */
  background: none;
}

/* esconde título da fase no mobile */
body.is-mobile #game-hud .phase-info .tag,
body.is-mobile #game-hud .phase-info .title {
  display: none !important;
}
body.is-mobile #game-hud .phase-info {
  width: 100%;
  min-width: 0;
  order: 1;
}
body.is-mobile #game-hud .phase-info .phase-text {
  width: 100%;
}
body.is-mobile #game-hud .phase-info .title-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* �"?�"? tempo �"?�"? */
body.is-mobile #game-hud .match-time {
  flex: 0 0 auto;
  padding: 0 !important;
  gap: 5px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.is-mobile #game-hud .match-time.is-urgent,
body.is-mobile #game-hud .match-time.is-critical {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
body.is-mobile #game-hud .match-time .mt-ico {
  width: 22px;
  height: 22px;
}
body.is-mobile #game-hud .match-time #g-time {
  font-size: 15px;
  font-weight: 700;
  min-width: 3ch;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}

/* �"?�"? meta �"?�"? */
body.is-mobile #goal-meter {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 160px !important;
}
body.is-mobile #goal-meter .gm-head {
  margin-bottom: 2px;
}
body.is-mobile #goal-meter .gm-label {
  font-size: 7px;
  letter-spacing: 0.08em;
  gap: 2px;
}
body.is-mobile #goal-meter .gm-label svg {
  width: 9px;
  height: 9px;
}
body.is-mobile #goal-meter .gm-nums {
  font-size: 9px;
}
body.is-mobile #goal-meter .gm-nums .gm-cur {
  font-size: 11px;
}
body.is-mobile #goal-meter .gm-track {
  height: 3px;
  border-radius: 999px;
}
body.is-mobile #goal-meter .gm-marks {
  display: none !important;
}

/* �"?�"? Sair: topo do rail vertical (só ícone, sem caixa) �"?�"? */
body.is-mobile #game-opts #btn-exit-game {
  position: static !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(255, 220, 210, 0.95) !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  transform: none !important;
  transition: transform 0.12s, opacity 0.15s, color 0.15s !important;
}
body.is-mobile #game-opts #btn-exit-game:hover,
body.is-mobile #game-opts #btn-exit-game:active {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
}
body.is-mobile #game-opts #btn-exit-game:active {
  transform: scale(0.94) !important;
}
body.is-mobile #game-opts #btn-exit-game .exit-label {
  display: none !important;
}
body.is-mobile #game-opts #btn-exit-game .exit-icon {
  display: flex !important;
  width: 16px;
  height: 16px;
  margin: 0 !important;
  color: inherit;
  filter: none;
}
body.is-mobile #game-opts #btn-exit-game .exit-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* �"?�"? stats: linha compacta sob o status �"?�"? */
body.is-mobile #game-hud .stats {
  order: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  margin: 0;
  font-size: 11px;
  min-width: 0;
}
body.is-mobile #game-hud .stats > div {
  padding: 0 10px;
  text-align: left;
}
body.is-mobile #game-hud .stats > div:first-child {
  padding-left: 0;
}
body.is-mobile #game-hud .stats > div:not(:last-child)::after {
  color: rgba(255,255,255,0.22);
  font-size: 12px;
}
body.is-mobile #game-hud .stats span.label {
  font-size: 8px;
  letter-spacing: 0.1em;
  opacity: 0.65;
}
body.is-mobile #game-hud .stats b {
  font-size: 15px;
  margin-top: 2px;
  font-weight: 700;
}

/* �"?�"? rail vertical direito: sair + zoom / replay / destro / girar �"?�"? */
body.is-mobile #game-opts {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  bottom: auto;
  left: auto;
  order: unset;
  flex: none;
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 4px 2px;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 40;
}
body.is-mobile #game-opts .cant-readout {
  display: none !important;
}
body.is-mobile #btn-inspect-target,
body.is-mobile #btn-replay-shot,
body.is-mobile #btn-hand,
body.is-mobile #btn-cant-mode {
  width: 48px !important;
  min-width: 48px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 6px 2px 5px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(255, 255, 255, 0.88) !important;
  letter-spacing: 0.06em !important;
}
body.is-mobile #btn-inspect-target {
  margin-top: 2px !important;
  padding-top: 6px !important;
  border-top: none !important;
  border-radius: 12px !important;
}
body.is-mobile #btn-inspect-target:active,
body.is-mobile #btn-replay-shot:active:not(:disabled),
body.is-mobile #btn-hand:active,
body.is-mobile #btn-cant-mode:active {
  background: transparent !important;
  border: none !important;
  transform: scale(0.94) !important;
}
body.is-mobile #btn-inspect-target.active,
body.is-mobile #btn-replay-shot.active,
body.is-mobile #btn-hand.active,
body.is-mobile #btn-cant-mode.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffe08a !important;
}
body.is-mobile #btn-inspect-target .zoom-icon {
  width: 22px;
  height: 22px;
}
body.is-mobile #btn-replay-shot .replay-icon,
body.is-mobile #btn-hand .hand-icon,
body.is-mobile #btn-cant-mode .cant-icon {
  width: 22px !important;
  height: 22px !important;
}
body.is-mobile #btn-inspect-target .zoom-label,
body.is-mobile #btn-replay-shot .replay-label,
body.is-mobile #btn-hand .hand-label,
body.is-mobile #btn-cant-mode .cant-label {
  font-size: 8px !important;
  letter-spacing: 0.08em !important;
  opacity: 0.72;
  line-height: 1;
}

/* controles de arco / força / timer */
body.is-mobile #bow-grab,
body.is-mobile #bow-draw {
  width: 76px;
  height: 76px;
  bottom: max(100px, calc(env(safe-area-inset-bottom) + 88px));
}
body.is-mobile #bow-grab .grab-core,
body.is-mobile #bow-draw .draw-core {
  width: 76px;
  height: 76px;
}
/* mira logo abaixo do pegar/puxar no mobile */
body.is-mobile #btn-sight {
  bottom: max(36px, calc(env(safe-area-inset-bottom) + 28px));
  padding: 0 8px 0 0;
}
body.is-mobile #btn-sight .sight-core {
  width: 48px;
  height: 48px;
}
body.is-mobile #btn-sight .sight-core svg {
  width: 24px;
  height: 24px;
}
body.is-mobile #btn-sight .sight-label {
  font-size: 10px;
}
body.is-mobile #btn-sight .sight-zoom {
  font-size: 11px !important;
}
body.is-mobile #shot-timer {
  bottom: max(28px, env(safe-area-inset-bottom));
}
body.is-mobile #game-hud .power-dock {
  bottom: max(20px, env(safe-area-inset-bottom));
  width: min(320px, calc(100vw - 72px));
}
body.is-mobile #game-hud .power-wrap {
  width: 100%;
  margin-right: 0;
  pointer-events: none;
}
body.is-mobile #game-hud .power-inbox {
  width: 42px;
  height: 42px;
  margin-left: 12px;
}
body.is-mobile #game-hud .power-inbox svg,
body.is-mobile #game-hud .power-inbox .pi-wa {
  width: 30px;
  height: 30px;
}
body.is-mobile #scope-overlay.mode-scope .so-tube {
  width: min(80vmin, 440px);
  height: min(80vmin, 440px);
}
body.is-mobile #scope-overlay.mode-reddot .so-tube {
  width: min(48vmin, 280px);
  height: min(48vmin, 280px);
}
body.is-mobile #game-hud .power-row {
  gap: 6px;
}
body.is-mobile #game-hud .power-btn {
  display: flex !important;
  pointer-events: auto;
  width: 44px;
  height: 44px;
  color: #fff;
}
body.is-mobile #game-hud .power-track {
  pointer-events: auto;
  height: 14px;
  /* hit area maior no touch */
  margin: 4px 0;
  touch-action: none;
  cursor: pointer;
}
body.is-mobile #game-hud .power-target-mark {
  top: -6px;
  bottom: -6px;
  width: 3px;
  margin-left: -1.5px;
}
body.is-mobile #game-hud .power-label {
  font-size: 10px;
  margin-bottom: 6px;
  padding: 0 4px;
}
body.is-mobile #game-overlay .card h2 {
  font-size: 28px;
}
body.is-mobile #game-overlay .card .scoreline {
  font-size: 44px;
}
body.is-mobile #game-overlay .card .actions {
  width: min(300px, 88vw);
  gap: 12px;
}
body.is-mobile #game-overlay .card button {
  width: 100%;
  min-height: 50px;
  height: 50px;
  font-size: 12px;
  letter-spacing: 0.12em;
}
body.is-mobile #cine-caption {
  bottom: max(14%, calc(env(safe-area-inset-bottom) + 48px));
  padding: 0 16px;
}
body.is-mobile #cine-caption .cine-tag {
  font-size: 10px;
  letter-spacing: 0.22em;
  margin-bottom: 8px;
}
body.is-mobile #cine-caption .cine-title {
  font-size: 20px;
  padding: 0 8px;
  line-height: 1.2;
}
body.is-mobile #cine-caption .cine-line {
  width: 36px;
  margin-top: 12px;
}
body.is-mobile #cine-skip {
  margin-top: 20px;
  min-height: 44px;
  padding: 12px 20px 12px 16px;
}
body.is-mobile #cine-skip:active {
  transform: scale(0.96);
  opacity: 0.9;
}
body.is-mobile #replay-bar {
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(calc(100% - 16px), 520px);
  left: 50%;
  transform: translateX(-50%);
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
}
/* dica touch: desativada (desktop e mobile) */
#mobile-hint {
  display: none !important;
}
@media (max-width: 720px), (pointer: coarse) {
  body { -webkit-text-size-adjust: 100%; }
}

/* ── desbloqueio de equipamento (rewarded · 24h) ─────────────
   mesma linguagem do jogo: transparente, borda fina, pílula,
   uppercase espaçado, cor só no acento do tier               */
#gs-unlock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  margin-left: auto;
  padding: 11px 20px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  color: #fff;
  font: 600 10px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  transition: border-color 0.15s ease, text-shadow 0.2s ease, transform 0.15s ease;
}
#gs-unlock:hover {
  border-color: #fff;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.4), 0 1px 12px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}
#gs-unlock:active { transform: translateY(0) scale(0.98); }
#gs-unlock .gsu-lock { display: inline-flex; }
#gs-unlock .gsu-lock svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.gs-timer {
  margin-top: 12px;
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
/* USAR — mesmo desenho do CTA, cheio de destaque */
#gs-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  margin-left: auto;
  padding: 11px 22px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  color: #fff;
  font: 700 10px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  transition: border-color 0.15s ease, text-shadow 0.2s ease, transform 0.15s ease;
}
#gs-select:hover {
  border-color: #fff;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.4), 0 1px 12px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}
#gs-select:active { transform: translateY(0) scale(0.98); }

/* EM USO — selo discreto, não clicável */
.gs-inuse {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 16px;
  margin-left: auto;
  font: 600 10px/1 system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gs-accent, #c8cdd4);
}
.gs-inuse svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#gs-unlock[hidden],
#gs-select[hidden],
.gs-inuse[hidden],
.gs-timer[hidden] {
  display: none !important;
}

/* página de desbloqueio — estética da splash Arc Play */
#gear-unlock {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: none;
  align-items: center;
  justify-content: center;
}
#gear-unlock.show { display: flex; }
#gear-unlock .gu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#gear-unlock .gu-card {
  position: relative;
  width: min(400px, calc(100vw - 48px));
  padding: 46px 40px 42px;
  background: transparent;
  text-align: center;
  color: #fff;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  animation: guIn 0.4s ease;
}
@keyframes guIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
#gear-unlock .gu-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s;
}
#gear-unlock .gu-close:hover { color: #fff; }

#gear-unlock .gu-step { display: none; }
#gear-unlock[data-step='offer'] .gu-offer { display: block; }
#gear-unlock[data-step='ad'] .gu-ad { display: block; }
#gear-unlock[data-step='progress'] .gu-progress { display: block; }
#gear-unlock[data-step='done'] .gu-done { display: block; }
#gear-unlock[data-step='progress'] .gu-close,
#gear-unlock[data-step='done'] .gu-close { display: none; }

/* página do anúncio (simulada): card alarga para formato de tela */
#gear-unlock[data-step='ad'] .gu-card {
  width: min(760px, calc(100vw - 40px));
  padding: 46px 24px 34px;
}
.gu-ad-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.gu-ad-tag {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.gu-ad-countdown {
  font: 400 11px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: tabular-nums;
}
.gu-ad-countdown b { color: #fff; font-weight: 700; }
.gu-ad-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.045), transparent 55%),
    #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}
.gu-ad-mark {
  position: relative;
  width: 84px;
  height: 84px;
  margin-bottom: 10px;
}
.gu-ad-ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  animation: guSpin 2.2s linear infinite;
}
.gu-ad-logo {
  position: absolute;
  inset: 18px;
  color: rgba(255, 255, 255, 0.85);
}
.gu-ad-title {
  font: 600 15px/1.2 system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.gu-ad-sub {
  font: 400 11px/1.5 system-ui, sans-serif;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}
.gu-ad-bar {
  height: 2px;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  overflow: hidden;
}
.gu-ad-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 99px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.gu-kicker {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.gu-tier {
  margin-top: 26px;
  font: 600 10px/1 system-ui, sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gu-accent, #c8cdd4);
}
.gu-name {
  margin-top: 10px;
  font: 600 24px/1.2 system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gu-sub {
  margin: 16px auto 0;
  max-width: 300px;
  font: 400 12.5px/1.6 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.58);
}
.gu-sub b { color: #fff; font-weight: 600; }
.gu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 230px;
  margin-top: 30px;
  padding: 16px 28px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  color: #fff;
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, text-shadow 0.2s ease, transform 0.2s ease;
}
.gu-cta:hover {
  border-color: #fff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
  transform: translateY(-2px) scale(1.02);
}
.gu-cta:active { transform: none; opacity: 0.9; }
.gu-cta-play { font-size: 10px; }
.gu-hint {
  margin-top: 16px;
  font: 400 10px/1.5 system-ui, sans-serif;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.35);
}

/* desbloqueando — anel fino + barra estilo splash */
.gu-gear-anim {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 26px;
}
.gu-ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: guSpin 1.1s linear infinite;
}
@keyframes guSpin { to { transform: rotate(360deg); } }
.gu-progress-title {
  font: 600 16px/1.2 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gu-progress-item {
  margin-top: 10px;
  font: 600 10px/1 system-ui, sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gu-accent, #c8cdd4);
}
.gu-bar {
  position: relative;
  height: 2px;
  width: min(280px, 70vw);
  margin: 30px auto 0;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  overflow: hidden;
}
.gu-bar-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 99px;
  transition: width 0.12s linear;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
}
.gu-bar-shine { display: none; }
.gu-progress-pct {
  margin-top: 14px;
  font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
  font-variant-numeric: tabular-nums;
}

/* sucesso — círculo fino + check SVG */
.gu-done-mark {
  width: 66px;
  height: 66px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.18);
  animation: guPop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.gu-done-mark svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes guPop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.gu-done-title {
  font: 600 18px/1.2 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gu-done-sub {
  margin-top: 12px;
  font: 400 11.5px/1.5 system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 720px), (pointer: coarse) {
  #gear-unlock .gu-card { padding: 38px 22px 34px; }
  .gu-name { font-size: 19px; }
}

/* ── social: amigos + inbox ─────────────────────────────────── */
.tub-left {
  display: flex;
  align-items: center;
  gap: 22px;
}
#btn-friends,
#btn-inbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: color 0.15s ease, opacity 0.15s ease;
}
#btn-friends:hover,
#btn-inbox:hover { color: #fff; }
#btn-friends .ps-mc-icon,
#btn-inbox .ps-mc-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}
#btn-friends svg,
#btn-inbox svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
}
.tub-badge {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 99px;
  background: #0c0e12;
  color: rgba(255, 255, 255, 0.85);
  font: 700 9px/1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.tub-badge-alert {
  border-color: #fff;
  background: #fff;
  color: #0c0e12;
}
.tub-badge[hidden] { display: none !important; }

/* nº de amigos: texto ao lado do ícone (escala até milhares sem apertar) */
#btn-friends { gap: 7px; }
.tub-count {
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
  transition: color 0.15s ease;
}
#btn-friends:hover .tub-count { color: #fff; }
.tub-count[hidden] { display: none !important; }

/* pedido/desafio pendente: pontinho de alerta no canto do ícone */
#btn-friends .ps-mc-icon { position: relative; overflow: visible !important; }
.tub-alert-dot {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
  animation: tubDotPulse 1.6s ease-in-out infinite;
}
@keyframes tubDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.tub-alert-dot[hidden] { display: none !important; }

/* painel social — mesma linguagem do lobby de duelo */
#social-overlay {
  position: fixed;
  inset: 0;
  z-index: 230;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 10, 0.88);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
#social-overlay.show { display: flex; }
.so-panel {
  position: relative;
  width: min(430px, calc(100vw - 40px));
  max-height: min(620px, calc(100vh - 60px));
  display: flex;
  flex-direction: column;
  background: linear-gradient(168deg, #14141a, #0d0d12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: #fff;
  font-family: system-ui, -apple-system, sans-serif;
  overflow: hidden;
  animation: guIn 0.32s ease;
}
.so-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
}
.so-head h2 {
  font: 600 13px/1 system-ui, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.so-close {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.so-close:hover { color: #fff; }
.so-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.so-tab {
  position: relative;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.55);
  font: 600 10px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.so-tab:hover { color: #fff; }
.so-tab.active {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.so-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 99px;
  background: #fff;
  color: #0c0e12;
  font: 700 8.5px/1 system-ui, sans-serif;
}
.so-tab-badge[hidden] { display: none !important; }

.so-view { flex: 1; overflow-y: auto; min-height: 240px; }
.so-view[hidden] { display: none !important; }
.so-view-thread {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* pedidos + desafios no topo da lista */
.so-requests,
.so-challenges {
  padding: 12px 20px 0;
}
.so-req-row,
.so-ch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.so-req-txt,
.so-ch-txt {
  flex: 1;
  font: 400 12px/1.4 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.8);
}
.so-req-txt b,
.so-ch-txt b { color: #fff; font-weight: 600; }
.so-mini-btn {
  padding: 8px 14px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  color: #fff;
  font: 700 9px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.so-mini-btn:hover { border-color: #fff; transform: translateY(-1px); }
.so-mini-btn.ghost {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
}

/* lista de amigos */
.so-list { padding: 10px 12px 16px; }
.so-friend {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  text-align: left;
  transition: background 0.15s;
}
.so-friend:hover { background: rgba(255, 255, 255, 0.05); }
.so-av {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: #101016;
  font-size: 18px;
  overflow: hidden;
}
.so-av img { width: 100%; height: 100%; object-fit: cover; }
.so-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #0d0d12;
  background: #3a3a42;
}
.so-friend.is-online .so-dot { background: #59d97e; }
.so-friend-info { flex: 1; min-width: 0; }
.so-friend-nick {
  font: 600 13px/1.2 system-ui, sans-serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-friend-sub {
  margin-top: 3px;
  font: 400 10.5px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
}
.so-friend.is-online .so-friend-sub { color: #59d97e; }
.so-friend-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.so-friend-rank {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  min-width: 2.2em;
  padding: 0 2px;
  color: rgba(255, 224, 138, 0.92);
  font: 700 13px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}
.so-friend-rank em {
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: 0;
  color: rgba(255, 224, 138, 0.55);
  font-style: normal;
}
.so-friend-rank.is-none {
  color: rgba(255, 255, 255, 0.28);
  font-weight: 600;
  font-size: 12px;
}
.so-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 99px;
  background: #fff;
  color: #0c0e12;
  font: 700 9.5px/1 system-ui, sans-serif;
}
.so-empty {
  padding: 40px 30px;
  text-align: center;
  font: 400 12.5px/1.7 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.45);
}
.so-empty[hidden] { display: none !important; }
.so-list-hint#so-loading {
  margin: 28px 16px;
  letter-spacing: 0.04em;
}

/* ── busca + seleção em massa (aba Amigos) ── */
.so-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* espaço igual acima e abaixo — não cola na linha das abas */
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}
.so-tools[hidden] { display: none !important; }

/* uma linha: [busca ─────] [Selecionar] [Todos] [Desfazer] */
.so-tools-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.so-tools-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  min-width: 0;
}

/* campo de pesquisa — pílula 100% arredondada */
.so-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 12px 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.so-search:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.045);
}
.so-search:focus-within {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
.so-search svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  stroke: rgba(255, 255, 255, 0.42);
  fill: none;
  transition: stroke 0.15s ease;
}
.so-search:focus-within svg { stroke: rgba(255, 255, 255, 0.75); }
.so-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font: 400 12.5px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.01em;
  -webkit-appearance: none;
  appearance: none;
}
.so-search input::-webkit-search-decoration,
.so-search input::-webkit-search-cancel-button,
.so-search input::-webkit-search-results-button,
.so-search input::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
}
.so-search input::placeholder {
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: 0.02em;
}
.so-search-clear {
  appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.so-search-clear:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.so-search-clear[hidden] { display: none !important; }

/* botões na mesma altura da busca */
.so-tool-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 38px;
  padding: 0 12px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.so-tool-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
}
.so-tool-btn.active {
  color: #0c0e12;
  border-color: #fff;
  background: #fff;
}
.so-tool-btn.active:hover {
  color: #0c0e12;
  background: rgba(255, 255, 255, 0.92);
  border-color: #fff;
}
.so-tool-btn.danger {
  color: #fda4af;
  border-color: rgba(253, 164, 175, 0.4);
  background: rgba(253, 164, 175, 0.06);
}
.so-tool-btn.danger:hover:not(:disabled) {
  color: #fff;
  border-color: #fda4af;
  background: rgba(253, 164, 175, 0.14);
}
.so-tool-btn:disabled {
  opacity: 0.32;
  cursor: default;
  background: transparent;
}
.so-bulk {
  display: flex;
  align-items: center;
  gap: 6px;
}
.so-bulk[hidden] { display: none !important; }
#so-bulk-count {
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  margin-left: 1px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font: 700 9px/1 system-ui, sans-serif;
  letter-spacing: 0;
}
.so-tool-btn.danger:not(:disabled) #so-bulk-count {
  background: rgba(253, 164, 175, 0.22);
  color: #fff;
}

/* telas estreitas: busca ocupa linha inteira se faltar espaço */
@media (max-width: 380px) {
  .so-tools-main {
    flex-wrap: wrap;
  }
  .so-search {
    flex: 1 1 100%;
  }
  .so-tools-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* seleção nas linhas de amigo */
.so-friend.is-select-mode { cursor: pointer; }
.so-friend.is-select-mode:hover { background: rgba(255, 255, 255, 0.05); }
.so-friend.is-selected {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}
.so-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  margin: 0 2px 0 0;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  color: transparent;
  font-size: 11px;
  line-height: 1;
  transition: border-color 0.12s, background 0.12s, color 0.12s, transform 0.12s;
}
.so-friend.is-selected .so-check {
  border-color: #fff;
  background: #fff;
  color: #0c0e12;
  font-weight: 700;
}

/* modal de confirmação (dentro do painel social) */
.so-confirm {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(6, 6, 10, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.so-confirm[hidden] { display: none !important; }
.so-confirm-card {
  width: min(320px, 100%);
  padding: 24px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: linear-gradient(168deg, #17171f, #0f0f14);
  color: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  animation: guIn 0.22s ease;
}
.so-confirm-card h3 {
  margin: 0 0 10px;
  font: 600 12px/1.2 system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.so-confirm-txt {
  margin: 0 0 20px;
  font: 400 13px/1.55 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.62);
}
.so-confirm-txt b { color: rgba(255, 255, 255, 0.95); font-weight: 600; }
.so-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.so-confirm-btn {
  appearance: none;
  height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font: 600 10px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.so-confirm-btn:hover { border-color: #fff; color: #fff; }
.so-confirm-btn.danger {
  border-color: rgba(253, 164, 175, 0.45);
  color: #fda4af;
}
.so-confirm-btn.danger:hover {
  border-color: #fda4af;
  color: #fff;
}

/* conversa */
.so-thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.so-back {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.so-back:hover { color: #fff; }
.so-thread-av {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  font-size: 14px;
  overflow: hidden;
  flex: 0 0 auto;
}
.so-thread-av img { width: 100%; height: 100%; object-fit: cover; }
.so-thread-nick {
  font: 600 13.5px/1.15 system-ui, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-thread-online {
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #59d97e;
  margin-left: 2px;
}
.so-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent;
}
/* bolhas limpas — sem caixa pesada */
.so-msg {
  max-width: 82%;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
  font: 400 13.5px/1.5 system-ui, sans-serif;
  word-wrap: break-word;
  color: rgba(255, 255, 255, 0.88);
}
.so-msg.me {
  align-self: flex-end;
  text-align: right;
  color: #fff;
}
.so-msg.them {
  align-self: flex-start;
  text-align: left;
  color: rgba(255, 255, 255, 0.82);
}
.so-msg.sys {
  align-self: center;
  max-width: 90%;
  margin: 2px 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: rgba(255, 224, 138, 0.55);
  font-size: 11px;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.so-msg.sys .so-msg-meta {
  justify-content: center;
  margin-top: 2px;
}
.so-msg.sys .so-msg-time {
  opacity: 0.4;
  color: rgba(255, 255, 255, 0.4);
}
.so-msg-body {
  display: block;
  white-space: pre-wrap;
}
.so-msg.me .so-msg-body {
  color: #fff;
}
.so-msg.them .so-msg-body {
  color: rgba(255, 255, 255, 0.78);
}
.so-msg-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  min-height: 12px;
}
.so-msg.me .so-msg-meta {
  justify-content: flex-end;
}
.so-msg.them .so-msg-meta {
  justify-content: flex-start;
}
.so-msg-time {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  opacity: 0.38;
  line-height: 1;
  white-space: nowrap;
}
/* ticks estilo WhatsApp (só nas minhas mensagens) */
.so-ticks {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
  color: rgba(255, 255, 255, 0.35);
}
.so-ticks.is-sent { color: rgba(255, 255, 255, 0.32); }
.so-ticks.is-delivered { color: rgba(255, 255, 255, 0.4); }
.so-ticks.is-read { color: #5eb8e8; }
.so-ticks-svg {
  width: 14px;
  height: 10px;
  display: block;
}
.so-ticks-double {
  width: 17px;
  height: 10px;
}
.so-msg.them .so-ticks { display: none; }
.so-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#so-input {
  flex: 1;
  padding: 11px 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #fff;
  font: 400 13px/1 system-ui, sans-serif;
  outline: none;
}
#so-input:focus { border-color: rgba(255, 255, 255, 0.45); }
#so-send {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
#so-send:hover { border-color: #fff; transform: translateY(-1px); }
#so-send svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }

/* inbox in-game: fica no power-dock (regras em #game-hud .power-inbox) */
#game-social-btn.power-inbox {
  /* neutraliza qualquer estilo legado de botão flutuante */
  position: absolute;
  right: auto;
  bottom: auto;
}

/* + amigo no painel de duelo */
.op-addfriend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 13px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.op-addfriend:hover { border-color: #fff; color: #fff; }
.op-addfriend[disabled] {
  opacity: 0.55;
  cursor: default;
  border-color: rgba(255, 255, 255, 0.25);
}
.op-addfriend svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
.op-addfriend[hidden] { display: none !important; }

@media (max-width: 720px), (pointer: coarse) {
  .tub-left { gap: 16px; }
  .so-panel { max-height: calc(100vh - 30px); }
}

/* -- convite de amigos + cerimonia de amigo adicionado -- */
.so-invite-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 20px 18px;
  padding: 13px 16px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 12px;
}
.so-invite-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.so-invite-txt b {
  font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
}
.so-invite-txt span {
  font: 400 10.5px/1.4 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.5);
}
#so-invite {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
#so-invite svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }

#friend-added {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 10, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#friend-added.show { display: flex; }
.fa-stage {
  position: relative;
  text-align: center;
  color: #fff;
  font-family: system-ui, -apple-system, sans-serif;
  animation: guIn 0.35s ease;
}
.fa-av {
  position: relative;
  width: 86px;
  height: 86px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #101016;
  font-size: 40px;
  overflow: hidden;
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.2);
  animation: faPop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.fa-av img { width: 100%; height: 100%; object-fit: cover; }
@keyframes faPop {
  0% { transform: scale(0.2); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: none; opacity: 1; }
}
.fa-ring {
  position: absolute;
  left: 50%;
  top: 43px;
  width: 86px;
  height: 86px;
  margin-left: -43px;
  margin-top: -43px;
  box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.fa-ring.r1 { animation: faRing 1.6s ease-out 0.15s infinite; }
.fa-ring.r2 { animation: faRing 1.6s ease-out 0.65s infinite; }
@keyframes faRing {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.1); }
}
.fa-title {
  font: 600 20px/1.2 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fa-nick {
  margin-top: 8px;
  font: 600 13px/1 system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #59d97e;
}
.fa-sub {
  margin-top: 12px;
  font: 400 12px/1.5 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.55);
}

/* ── modal: montar desafio (pista + flechas) ── */
#challenge-setup {
  position: fixed;
  inset: 0;
  z-index: 258;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(6, 6, 10, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#challenge-setup.show { display: flex; }
.cs-card {
  position: relative;
  width: min(420px, 100%);
  max-height: min(620px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 22px 20px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: linear-gradient(168deg, #15151c, #0c0c12);
  color: #fff;
  font-family: system-ui, -apple-system, sans-serif;
  animation: cwIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.cs-close:hover { color: #fff; }
.cs-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-right: 24px;
}
.cs-av {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 224, 138, 0.4);
  border-radius: 50%;
  background: #101016;
  font-size: 26px;
  overflow: hidden;
}
.cs-av img { width: 100%; height: 100%; object-fit: cover; }
.cs-kicker {
  margin: 0 0 4px;
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 224, 138, 0.75);
}
#cs-title {
  margin: 0 0 4px;
  font: 600 15px/1.2 system-ui, sans-serif;
  letter-spacing: 0.04em;
}
.cs-nick {
  margin: 0;
  font: 400 12.5px/1.3 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.55);
}
.cs-section { margin-bottom: 16px; }
.cs-label {
  margin: 0 0 10px;
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.cs-phases {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 2px;
}
.cs-phase {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin: 0;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.cs-phase:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
}
.cs-phase.is-on {
  border-color: rgba(255, 224, 138, 0.55);
  background: rgba(255, 224, 138, 0.08);
}
.cs-phase.is-locked {
  opacity: 0.38;
  cursor: not-allowed;
}
.cs-phase-id {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font: 700 11px/1 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.7);
}
.cs-phase.is-on .cs-phase-id {
  border-color: rgba(255, 224, 138, 0.55);
  color: #ffe08a;
}
.cs-phase-meta { flex: 1; min-width: 0; }
.cs-phase-name {
  display: block;
  font: 600 12.5px/1.2 system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-phase-sub {
  display: block;
  margin-top: 3px;
  font: 400 10.5px/1.2 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-arrows {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cs-arrow {
  appearance: none;
  min-width: 48px;
  height: 40px;
  padding: 0 12px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font: 700 13px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.cs-arrow:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.cs-arrow.is-on {
  border-color: #ffe08a;
  background: rgba(255, 224, 138, 0.12);
  color: #ffe08a;
}
.cs-summary {
  margin: 4px 0 16px;
  padding: 11px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  font: 400 12px/1.45 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.55);
}
.cs-summary b { color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.cs-actions {
  display: flex;
  gap: 10px;
}
.cs-btn {
  flex: 1;
  appearance: none;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font: 700 10px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}
.cs-btn:hover { transform: translateY(-1px); }
.cs-btn.ghost {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.7);
}
.cs-btn.ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.cs-btn.primary {
  border-color: #ffe08a;
  background: linear-gradient(180deg, rgba(255, 224, 138, 0.22), rgba(255, 224, 138, 0.08));
  color: #ffe08a;
}
.cs-btn.primary:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 224, 138, 0.32), rgba(255, 224, 138, 0.12));
}
.cs-btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

/* ── botão Duelo (só ícone) ── */
.so-duel-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 224, 138, 0.35);
  border-radius: 50%;
  background: transparent;
  color: #ffe08a;
  font: 700 9px/1 system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.so-duel-btn:hover {
  border-color: #ffe08a;
  background: rgba(255, 224, 138, 0.1);
  color: #fff;
}
.so-duel-btn .so-duel-ico { font-size: 13px; line-height: 1; }
.so-duel-btn.so-duel-ico-only { min-width: 30px; }

/* ── tela: aguardando aceite do desafio ── */
#challenge-wait {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 6, 10, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#challenge-wait.show { display: flex; }
.cw-card {
  position: relative;
  width: min(340px, 100%);
  padding: 40px 28px 28px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(168deg, #14141a, #0b0b10);
  color: #fff;
  overflow: hidden;
  animation: cwIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cwIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cw-rings {
  position: absolute;
  left: 50%;
  top: 76px;
  width: 112px;
  height: 112px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.55;
}
.cw-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  animation: cwRing 2.8s ease-out infinite;
}
.cw-ring.r2 { animation-delay: 0.9s; }
.cw-ring.r3 { animation-delay: 1.8s; }
@keyframes cwRing {
  0% { transform: scale(0.55); opacity: 0.4; }
  100% { transform: scale(1.4); opacity: 0; }
}
.cw-av {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: #0e0e14;
  font-size: 30px;
  overflow: hidden;
}
.cw-av img { width: 100%; height: 100%; object-fit: cover; }
.cw-kicker {
  margin: 0 0 10px;
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
#cw-title {
  margin: 0 0 10px;
  font: 600 17px/1.25 system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: #fff;
}
.cw-nick {
  margin: 0 0 6px;
  font: 600 14px/1.25 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.88);
}
.cw-sub {
  margin: 0 0 22px;
  font: 400 11.5px/1.45 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.02em;
}

/* status: só tipografia + dots — sem caixa, sem borda, sem fundo */
.cw-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 26px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font: 400 12px/1.4 system-ui, sans-serif;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.48);
}
.cw-status.is-ok #cw-status-txt {
  color: rgba(160, 220, 175, 0.95);
}
.cw-status.is-err #cw-status-txt {
  color: rgba(240, 170, 180, 0.95);
}
.cw-status.is-ok .cw-pulse,
.cw-status.is-err .cw-pulse {
  display: none;
}
/* loading: 3 dots via box-shadow (sem pill/caixa) */
.cw-pulse {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  margin: 0 14px 0 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow:
    8px 0 0 rgba(255, 255, 255, 0.35),
    16px 0 0 rgba(255, 255, 255, 0.22);
  animation: cwDots 1.15s ease-in-out infinite;
}
@keyframes cwDots {
  0%, 100% {
    background: rgba(255, 255, 255, 0.55);
    box-shadow:
      8px 0 0 rgba(255, 255, 255, 0.28),
      16px 0 0 rgba(255, 255, 255, 0.18);
  }
  33% {
    background: rgba(255, 255, 255, 0.28);
    box-shadow:
      8px 0 0 rgba(255, 255, 255, 0.55),
      16px 0 0 rgba(255, 255, 255, 0.28);
  }
  66% {
    background: rgba(255, 255, 255, 0.22);
    box-shadow:
      8px 0 0 rgba(255, 255, 255, 0.28),
      16px 0 0 rgba(255, 255, 255, 0.55);
  }
}
.cw-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font: 600 10px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cw-btn.ghost:hover {
  border-color: #fff;
  color: #fff;
}
.cw-btn[hidden] { display: none !important; }

/* ── modal: desafio recebido (suave) ── */
#challenge-incoming {
  position: fixed;
  inset: 0;
  z-index: 265;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 6, 10, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#challenge-incoming.show { display: flex; }
.ci-card {
  position: relative;
  width: min(380px, 100%);
  padding: 34px 26px 24px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: linear-gradient(168deg, #181820, #0d0d13);
  color: #fff;
  overflow: hidden;
  animation: ciIn 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ciIn {
  0% { opacity: 0; transform: translateY(28px) scale(0.94); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.ci-glow {
  position: absolute;
  left: 50%;
  top: -40px;
  width: 220px;
  height: 160px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255, 224, 138, 0.18), transparent 70%);
  pointer-events: none;
}
.ci-av {
  position: relative;
  width: 78px;
  height: 78px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: #101016;
  font-size: 34px;
  overflow: hidden;
  animation: ciAv 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
@keyframes ciAv {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}
.ci-av img { width: 100%; height: 100%; object-fit: cover; }
.ci-kicker {
  margin: 0 0 8px;
  font: 600 10px/1 system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 224, 138, 0.8);
}
#ci-title {
  margin: 0 0 8px;
  font: 600 17px/1.25 system-ui, sans-serif;
}
.ci-sub {
  margin: 0 0 24px;
  font: 400 12.5px/1.45 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.5);
}
.ci-actions {
  display: flex;
  gap: 10px;
}
.ci-btn {
  flex: 1;
  appearance: none;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font: 700 10px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, color 0.15s;
}
.ci-btn:hover { transform: translateY(-1px); }
.ci-btn.ghost {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.65);
}
.ci-btn.ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.ci-btn.primary {
  border-color: #ffe08a;
  background: linear-gradient(180deg, rgba(255, 224, 138, 0.22), rgba(255, 224, 138, 0.08));
  color: #ffe08a;
}
.ci-btn.primary:hover {
  background: linear-gradient(180deg, rgba(255, 224, 138, 0.32), rgba(255, 224, 138, 0.12));
  color: #fff;
}

/* card de desafio na lista — entrada suave */
.so-ch-row {
  animation: soChIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes soChIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.so-ch-row .so-mini-btn.ok {
  border-color: rgba(255, 224, 138, 0.7);
  color: #ffe08a;
}

/* -- modal de compartilhar convite -- */
#invite-share {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 10, 0.88);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
#invite-share.show { display: flex; }
.is-card {
  position: relative;
  width: min(430px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 26px 24px 22px;
  background: linear-gradient(168deg, #14141a, #0d0d12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: #fff;
  font-family: system-ui, -apple-system, sans-serif;
  animation: guIn 0.32s ease;
}
.is-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.is-close:hover { color: #fff; }
#is-title {
  font: 600 13px/1 system-ui, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.is-sub {
  margin-top: 8px;
  font: 400 11.5px/1.5 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.5);
}
.is-preview {
  display: block;
  width: 100%;
  margin-top: 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.is-msg {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  font: 400 12.5px/1.6 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.85);
  white-space: pre-wrap;
  word-break: break-word;
}
.is-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.is-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  color: #fff;
  font: 700 10px/1 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s;
}
.is-btn:hover { border-color: #fff; transform: translateY(-1px); }
.is-btn:active { transform: translateY(0) scale(0.97); }
.is-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.is-btn.is-wa svg { fill: currentColor; stroke: none; }
.is-btn.is-wa { border-color: rgba(89, 217, 126, 0.75); color: #59d97e; }
.is-btn.is-wa:hover { border-color: #59d97e; }
.is-btn[hidden] { display: none !important; }

/* animação do botão Copiar */
#is-copy.is-pop {
  animation: isCopyPop 0.45s cubic-bezier(0.22, 1.4, 0.36, 1);
}
#is-copy.is-copied {
  border-color: #59d97e;
  color: #59d97e;
  background: rgba(89, 217, 126, 0.1);
  box-shadow: 0 0 0 4px rgba(89, 217, 126, 0.12), 0 0 18px rgba(89, 217, 126, 0.2);
}
#is-copy.is-copy-err {
  border-color: #fda4af;
  color: #fda4af;
  background: rgba(253, 164, 175, 0.08);
}
@keyframes isCopyPop {
  0% { transform: scale(1); }
  35% { transform: scale(0.92); }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* -- hub social: rodape fixo, secoes, conversas, grupos -- */
.so-foot {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.so-foot[hidden] { display: none !important; }
.so-foot-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  font: 700 10px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.so-foot-btn:hover { border-color: #fff; color: #fff; transform: translateY(-1px); }
.so-foot-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

/* cabeçalhos de seção (Online / Offline / Grupos / Conversas) */
.so-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 6px;
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.so-sec .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #59d97e;
}
.so-sec.off .dot { background: #3a3a42; }

/* linha de amigo / conversa (Amigos + Inbox) — mesmo card */
.so-friend.so-conv {
  padding: 12px 10px;
  gap: 11px;
}
.so-conv-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.so-conv-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.so-conv-top .so-friend-nick {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
/* só o ponto verde ao lado do nome (sem texto "online") */
.so-on-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #59d97e;
  box-shadow: 0 0 0 2px rgba(89, 217, 126, 0.18);
}
.so-conv .so-av .so-dot {
  display: none; /* online fica ao lado do nome */
}
.so-conv-last {
  margin-top: 0;
  font: 400 12px/1.35 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-conv-last.is-sys {
  color: rgba(255, 224, 138, 0.45);
  font-style: normal;
}
.so-conv-last b { color: rgba(255, 255, 255, 0.55); font-weight: 600; }
.so-conv-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
}
.so-conv-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* placar geral de duelos entre os dois: 3×8 */
.so-h2h {
  font: 700 12px/1 ui-monospace, 'Cascadia Code', Consolas, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  min-width: 2.4em;
  text-align: right;
}
.so-h2h .so-h2h-x {
  margin: 0 1px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
}
.so-h2h.is-empty {
  color: rgba(255, 255, 255, 0.22);
  font-weight: 600;
}
.so-conv-time {
  font: 400 10px/1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.32);
  font-variant-numeric: tabular-nums;
}
.so-list-hint.so-inbox-empty {
  margin: 36px 20px;
  text-align: center;
  font: 400 12.5px/1.65 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.02em;
}

/* grupo: avatar quadrado arredondado com iniciais */
.so-gav {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  background: #101016;
  font: 700 13px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
}

/* conversa: sub (n jogadores) + desafiar no topo */
.so-thread-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.so-thread-sub {
  font: 400 9.5px/1 system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.so-thread-sub[hidden] { display: none !important; }
.so-th-duel { flex: 0 0 auto; }
.so-th-duel[hidden] { display: none !important; }

/* remetente na bolha de grupo */
.so-msg-from {
  display: block;
  margin-bottom: 3px;
  font: 700 9.5px/1 system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #59d97e;
}
.so-msg.me .so-msg-from { display: none; }

/* criar grupo */
.so-view-newgroup {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.so-ng-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
#so-ng-name {
  width: 100%;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #fff;
  font: 400 13px/1 system-ui, sans-serif;
  outline: none;
}
#so-ng-name:focus { border-color: rgba(255, 255, 255, 0.45); }
.so-ng-hint {
  margin: 12px 2px 8px;
  font: 400 11px/1.4 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.5);
}
.so-ng-hint b { color: #fff; }
.so-ng-friends { display: flex; flex-direction: column; }
.so-ng-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.so-ng-row:hover { background: rgba(255, 255, 255, 0.05); }
.so-ng-row .so-av { flex: 0 0 32px; width: 32px; height: 32px; font-size: 15px; }
.so-ng-row .nick {
  flex: 1;
  font: 600 12.5px/1.2 system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.so-ng-check {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: transparent;
  font-size: 11px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.so-ng-row.sel .so-ng-check {
  border-color: #59d97e;
  background: #59d97e;
  color: #0d0d12;
}
.so-ng-foot {
  flex: 0 0 auto;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
}


/* ── extensões leves (stats / ícones / pending) — sem redesenhar o modal ── */
.so-panel-v3 { }
.so-tabs[hidden] { display: none !important; }

.so-stats {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin: 0 20px 10px;
  padding: 0 0 4px;
  border: none;
  background: transparent;
}
.so-stats[hidden] { display: none !important; }
.so-stat {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
}
.so-stat-n {
  font: 600 12px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.9);
}
.so-stat-l {
  font: 500 9px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.so-stat-on .so-stat-n { color: #59d97e; }
.so-stat-on .so-stat-l { color: rgba(89, 217, 126, 0.75); }
.so-stat-off .so-stat-n { color: rgba(255, 255, 255, 0.5); }
.so-stat-div { display: none; }

.so-pending-out {
  padding: 12px 20px 0;
}
.so-pending-out[hidden] { display: none !important; }
.so-block-title {
  margin: 0 0 8px 2px;
  font: 600 9px/1 system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.so-block-wait { color: rgba(255, 255, 255, 0.45); }
.so-req-meta {
  display: block;
  margin-top: 3px;
  font: 400 10px/1 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.4);
}
.so-wait-meta { color: rgba(255, 255, 255, 0.45); }

.so-ico {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s;
}
.so-ico:hover { color: #fff; }
.so-ico.danger { color: rgba(255, 255, 255, 0.4); }
.so-ico.danger:hover { color: #fda4af; }
.so-ico-trash svg {
  display: block;
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
}
.so-friend-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.so-friend-sub.is-on { color: #59d97e; }
.so-friend-sub.is-off { color: rgba(255, 255, 255, 0.4); }
.so-list-hint {
  margin: 12px 16px;
  text-align: center;
  font: 400 11px/1.45 system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.4);
}
#so-th-duel[hidden],
#so-th-unfriend[hidden] { display: none !important; }

/* balão de chat: ancorado à direita da barra de força (centrada) */
#game-hud .power-inbox,
#game-social-btn.power-inbox {
  position: absolute;
  left: 100%;
  bottom: -2px;
  margin-left: 14px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: none;
  place-items: center;
  border: none;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  pointer-events: auto;
  z-index: 46;
}
body.game-mode #game-hud.active #game-social-btn.power-inbox:not([hidden]) {
  display: grid;
}
#game-hud .power-inbox svg,
#game-hud .power-inbox .pi-wa {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}
#game-hud .power-inbox .pi-wa-bubble {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
#game-hud .power-inbox:hover { color: #fff; }
#game-hud .power-inbox-badge {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  font: 700 9px/14px system-ui, sans-serif;
  color: #fff;
  background: #e23d4a;
  border: none;
  display: grid;
  place-items: center;
}
#game-hud .power-inbox-badge[hidden] { display: none !important; }


/* ── música da vitrine (cabeçalho, ao lado do Ranking) ─────── */
.tub-right {
  display: flex;
  align-items: center;
  gap: 22px;
}
#music-toggle {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: color 0.15s ease;
}
#music-toggle:hover { color: #fff; }
#music-toggle .ps-mc-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}
#music-toggle svg { width: 21px; height: 21px; stroke: currentColor; fill: none; }
#music-toggle .mt-off { display: none; }
#music-toggle.muted .mt-on { display: none; }
#music-toggle.muted .mt-off { display: block; }
#music-toggle.muted { color: rgba(255, 255, 255, 0.38); }

/* ── "Vamos começar" + transição suave splash → vitrine ────── */
#boot-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  white-space: nowrap;
  min-width: 250px;
  margin-top: 30px;
  padding: 17px 46px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  color: #fff;
  font: 700 14px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.15s ease,
    text-shadow 0.2s ease;
}
#boot-start[hidden] { display: none !important; }
#boot-loader.is-ready #boot-start {
  opacity: 1;
  transform: none;
  animation: bootStartGlow 2.6s ease-in-out 0.7s infinite;
}
@keyframes bootStartGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  50% { box-shadow: 0 0 26px 0 rgba(255, 255, 255, 0.22); }
}
#boot-start:hover {
  border-color: #fff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
}
#boot-start:active { transform: scale(0.97); }
#boot-start .bs-play { font-size: 11px; }

/* pronto: o miolo (percentual+barra+status) COLAPSA — como a splash é
   centralizada, o logo desce e o botão sobe um de encontro ao outro */
#boot-loader .boot-pct,
#boot-loader .boot-bar,
#boot-loader .boot-status {
  max-height: 48px;
  overflow: hidden;
  transition:
    max-height 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease;
}
#boot-loader.is-ready .boot-pct,
#boot-loader.is-ready .boot-bar,
#boot-loader.is-ready .boot-status {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
}

/* entrada da tela inicial (após o "Vamos começar") — só fade, e NUNCA
   no menu da vitrine nem no JOGAR (canto esquerdo fica estável) */
@keyframes vitrineEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.vitrine-enter #top-user-bar { animation: vitrineEnter 0.6s ease 0.2s both; }
body.vitrine-enter #phase-shortcuts { animation: vitrineEnter 0.6s ease 0.35s both; }
body.vitrine-enter #hint { animation: vitrineEnter 0.6s ease 0.5s both; }