:root {
    --wood-dark: #4a3324;
    --wood-mid: #6b4a30;
    --wood-light: #8a6440;
    --panel-black: #1a1a1a;
    --phosphor: #d8d4c8;
    --screen-bg: #0c0e0a;
    --amber: #e8a33d;
    --frame-color: #222222;
    --game-font: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
    --game-letter-spacing: normal;
  }

  * { box-sizing: border-box; }

  html {
    touch-action: manipulation;
    overflow-x: hidden;
  }

  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #201812;
    background-image:
      radial-gradient(ellipse at top, #2b2119, #14100b 70%);
    font-family: var(--game-font, 'Courier New', monospace); letter-spacing: var(--game-letter-spacing, normal);
    color: var(--phosphor);
    padding: 20px;
    overflow-x: hidden;
  }

  .console {
    position: relative;
    width: min(760px, 96vw);
    background: linear-gradient(180deg, var(--panel-black), #0f0f0f);
    border-radius: 14px;
    padding: 22px 22px 16px;
    box-shadow:
      0 20px 60px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(255,255,255,0.04);
    border: 1px solid #333;
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none; /* evita o menu de "Copiar/Selecionar" do iOS ao segurar o dedo */
  }

  /* Campos de texto de verdade continuam selecionáveis normalmente, senão não dá pra editar o nome */
  .console input {
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
  }

  /* --- Fase 2, Parte 4: parafusos decorativos nos cantos do console --- */
  .screw {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 30%, #8a8a8a, #3a3a3a 60%, #1a1a1a 100%);
    box-shadow: 0 1px 1px rgba(0,0,0,0.6), inset 0 0 1px rgba(255,255,255,0.3);
    z-index: 2;
  }
  .screw::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 1.5px;
    background: rgba(0,0,0,0.55);
    transform: translate(-50%, -50%) rotate(-25deg);
  }
  .screw-tl { top: 8px; left: 8px; }
  .screw-tr { top: 8px; right: 8px; }
  .screw-bl { bottom: 8px; left: 8px; }
  .screw-br { bottom: 8px; right: 8px; }

  .wood-strip {
    position: relative;
    min-height: 54px;
    margin: -22px -22px 16px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08), transparent 40%, rgba(0,0,0,0.15) 100%),
      repeating-linear-gradient(100deg,
        var(--wood-mid) 0px, var(--wood-light) 2px,
        var(--wood-mid) 5px, var(--wood-dark) 8px,
        var(--wood-mid) 10px, var(--wood-light) 13px);
    background-blend-mode: overlay, normal;
    border-radius: 14px 14px 0 0;
    border-bottom: 2px solid #000;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 2px;
    padding: 8px 18px;
  }

  .power-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade6a;
    box-shadow: 0 0 4px 1px rgba(74,222,106,0.8), 0 0 1px rgba(0,0,0,0.5);
    margin-right: 8px;
    display: inline-block;
    animation: ledFlicker 4s infinite ease-in-out;
  }
  @keyframes ledFlicker {
    0%, 92%, 100% { opacity: 1; }
    94% { opacity: 0.5; }
    96% { opacity: 1; }
  }

  .brand-row {
    display: flex;
    align-items: center;
  }

  .brand {
    font-family: Georgia, serif;
    font-weight: bold;
    letter-spacing: 2px;
    color: #f2e9d8;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    font-size: 24px;
  }

  .brand-sub {
    font-family: var(--game-font, 'Courier New', monospace); letter-spacing: var(--game-letter-spacing, normal);
    font-size: 12px;
    color: #f2e9d8cc;
    letter-spacing: 1px;
  }

  .screen-frame {
    position: relative;
    background: #050604;
    border-radius: 6px;
    padding: 10px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.9), inset 0 0 3px #000;
    border: 3px solid var(--frame-color);
    transition: border-color 0.3s ease;
  }

  canvas {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--screen-bg);
    border-radius: 2px;
    touch-action: none; /* impede rolar/dar zoom ao arrastar o dedo na tela do jogo */
  }

  /* Curvatura CRT aproximada: vinheta escurecendo os cantos, sem deformar o canvas de verdade */
  .screen-frame::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    pointer-events: none;
    border-radius: 8px;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.35) 100%);
    z-index: 2;
  }

  .scanline-overlay {
    position: relative;
  }

  /* "Vidro" da tela: reflexo diagonal sutil, como luz batendo no vidro do CRT */
  .screen-glass {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    pointer-events: none;
    z-index: 3;
    border-radius: 8px;
    background: linear-gradient(115deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 18%,
      transparent 32%,
      transparent 100%);
  }
  .scanline-overlay::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.15) 0px,
      rgba(0,0,0,0.15) 1px,
      transparent 1px,
      transparent 3px
    );
    border-radius: 2px;
    mix-blend-mode: multiply;
  }

  @keyframes scorePulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); color: #fff2d0; }
    100% { transform: scale(1); }
  }
  .score-panel.pulse {
    animation: scorePulse 0.3s ease-out;
  }

  .controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    gap: 14px;
    flex-wrap: wrap;
  }

  .game-select {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .dial-btn {
    font-family: var(--game-font, 'Courier New', monospace); letter-spacing: var(--game-letter-spacing, normal);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: linear-gradient(180deg, #333, #1c1c1c);
    color: var(--phosphor);
    border: 1px solid #444;
    border-radius: 18px;
    padding: 7px 13px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .dial-btn:hover { background: linear-gradient(180deg, #3d3d3d, #222); }
  .dial-btn.active {
    background: linear-gradient(180deg, var(--amber), #b97a20);
    color: #1a1200;
    border-color: var(--amber);
    box-shadow: 0 0 10px rgba(232,163,61,0.5);
  }

  .score-panel {
    font-size: 17px;
    color: var(--amber);
    letter-spacing: 1px;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .timer-panel {
    font-size: 13px;
    color: #cdc7b8;
    letter-spacing: 0.5px;
  }

  .instructions {
    margin-top: 14px;
    font-size: 14px;
    color: #cdc7b8;
    line-height: 1.6;
    letter-spacing: 0.5px;
  }
  .instructions b { color: var(--phosphor); }

  .start-btn {
    font-family: var(--game-font, 'Courier New', monospace); letter-spacing: var(--game-letter-spacing, normal);
    background: linear-gradient(180deg, #c94f3d, #8f2f22);
    color: #f5e9de;
    border: 1px solid #6b1f16;
    border-radius: 18px;
    padding: 7px 16px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
  }
  .start-btn:hover { filter: brightness(1.1); }

  .footer-label {
    text-align: center;
    margin-top: 14px;
    font-size: 11px;
    color: #a89f8c;
    letter-spacing: 2px;
  }

  .touch-controls {
    display: none;
    width: 100%;
    margin-top: 14px;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  .pad-group {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
  }

  .pad-btn {
    width: 120px;
    padding: 14px 0;
    font-size: 22px;
    background: linear-gradient(180deg, #333, #1c1c1c);
    color: var(--phosphor);
    border: 1px solid #444;
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
  }
  .pad-btn:active {
    background: linear-gradient(180deg, var(--amber), #b97a20);
    color: #1a1200;
  }

  @media (pointer: coarse) {
    .touch-controls { display: flex; }
    .instructions { display: none; }
  }

  .quick-start-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .champ-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
  }

  .champ-btn {
    font-family: var(--game-font, 'Courier New', monospace); letter-spacing: var(--game-letter-spacing, normal);
    background: linear-gradient(180deg, #555, #2a2a2a);
    color: var(--phosphor);
    border: 1px solid #444;
    border-radius: 18px;
    padding: 7px 14px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
  }
  .champ-btn:hover { filter: brightness(1.15); }
  .champ-btn.active {
    background: linear-gradient(180deg, var(--amber), #b97a20);
    color: #1a1200;
    border-color: var(--amber);
    box-shadow: 0 0 10px rgba(232,163,61,0.5);
  }
  .champ-btn:disabled {
    opacity: 0.6;
    cursor: default;
  }

  .practice-btn {
    background: linear-gradient(180deg, #555, #2a2a2a);
    border-color: #444;
  }
  .practice-btn.active {
    background: linear-gradient(180deg, var(--amber), #b97a20);
    color: #1a1200;
    border-color: var(--amber);
    box-shadow: 0 0 10px rgba(232,163,61,0.5);
  }

  @keyframes btnFlash {
    0%   { filter: brightness(1.9); transform: scale(1.06); }
    100% { filter: brightness(1); transform: scale(1); }
  }
  .champ-btn.flash {
    animation: btnFlash 0.35s ease-out;
  }

  .champ-panel {
    display: none;
    font-size: 14px;
    color: var(--amber);
    letter-spacing: 0.5px;
    background: #0000003d;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 10px;
  }

  .overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(5,6,4,0.94);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 8vh;
    border-radius: 0;
    z-index: 50;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    overflow-y: auto;
    max-height: 100vh;
  }
  .fireworks-canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .overlay-box {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 480px;
    width: 100%;
  }
  .overlay-trophy {
    font-size: 44px;
    margin-bottom: 6px;
    animation: trophyPop 0.5s ease-out;
  }
  @keyframes trophyPop {
    0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
    60%  { transform: scale(1.25) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
  }
  .overlay-title {
    font-family: Georgia, serif;
    font-size: 32px;
    color: var(--amber);
    margin-bottom: 10px;
    letter-spacing: 1px;
  }
  .overlay-msg {
    font-size: 15px;
    color: var(--phosphor);
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .overlay-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .overlay-btn {
    font-family: var(--game-font, 'Courier New', monospace); letter-spacing: var(--game-letter-spacing, normal);
    background: linear-gradient(180deg, var(--amber), #b97a20);
    color: #1a1200;
    border: 1px solid var(--amber);
    border-radius: 18px;
    padding: 7px 14px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
  }
  .overlay-btn.secondary {
    background: linear-gradient(180deg, #333, #1c1c1c);
    color: var(--phosphor);
    border-color: #444;
  }

  .profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
  }

  .profile-login {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
    min-width: 220px;
  }

  .profile-login input {
    flex: 1;
    min-width: 140px;
    font-family: var(--game-font, 'Courier New', monospace); letter-spacing: var(--game-letter-spacing, normal);
    background: #111;
    color: var(--phosphor);
    border: 1px solid #444;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    outline: none;
  }
  .profile-login input:focus { border-color: var(--amber); }
  .profile-login input::placeholder { color: #cfcabd; }

  .profile-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .profile-name {
    font-size: 16px;
    color: var(--amber);
    letter-spacing: 1px;
  }

  .trophy-case {
    display: flex;
    gap: 5px;
  }

  .trophy-icon {
    font-size: 28px;
    opacity: 0.65;
    filter: grayscale(0.35) brightness(1.1);
  }
  .trophy-icon.won {
    opacity: 1;
    filter: none;
    text-shadow: 0 0 6px rgba(232,163,61,0.7);
  }

  .mini-trophy {
    margin-left: 5px;
    font-size: 11px;
    opacity: 0.65;
    filter: grayscale(0.35) brightness(1.1);
  }
  .mini-trophy.won {
    opacity: 1;
    filter: none;
  }

  .target-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  .target-label {
    font-size: 14px;
    color: #cdc7b8;
    letter-spacing: 0.5px;
    margin-right: 2px;
  }
  .target-btn {
    font-family: var(--game-font, 'Courier New', monospace); letter-spacing: var(--game-letter-spacing, normal);
    background: linear-gradient(180deg, #333, #1c1c1c);
    color: var(--phosphor);
    border: 1px solid #444;
    border-radius: 14px;
    padding: 5px 11px;
    font-size: 13px;
    cursor: pointer;
  }
  .target-btn.active {
    background: linear-gradient(180deg, var(--amber), #b97a20);
    color: #1a1200;
    border-color: var(--amber);
  }

/* Retrato/paisagem: em telas baixas (celular deitado), aperta os espaçamentos
   pra tudo continuar cabendo sem precisar rolar demais */
@media (orientation: landscape) and (max-height: 500px) {
  body { padding: 8px; align-items: flex-start; }
  .console { padding: 12px 12px 10px; }
  .wood-strip { margin: -12px -12px 10px; height: 26px; }
  .champ-row, .profile-row, .target-row, .controls-row { margin-top: 6px; }
  .instructions { display: none; }
  .footer-label { margin-top: 6px; }
}

/* --- Fase 2: toast de conquista desbloqueada --- */
.achievement-toast {
  position: fixed;
  top: -100px;
  visibility: hidden;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #2a2115, #1a1410);
  border: 1px solid var(--amber);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 16px rgba(232,163,61,0.35);
  border-radius: 12px;
  padding: 12px 18px;
  z-index: 1000;
  transition: top 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 90vw;
}
.achievement-toast.show {
  top: 16px;
  visibility: visible;
}
.achievement-toast-icon {
  font-size: 40px;
  flex-shrink: 0;
}
.achievement-toast-title {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #cdc7b8;
}
.achievement-toast-name {
  font-size: 17px;
  color: var(--amber);
  font-weight: bold;
}

/* --- Fase 2: overlays de estatísticas/conquistas (reaproveitam o overlay base) --- */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  text-align: left;
  margin-bottom: 12px;
  font-size: 15px;
}
.stats-grid div b { color: var(--amber); }

.achievements-list {
  text-align: left;
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.achievement-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid #2a2a2a;
  opacity: 0.4;
  filter: grayscale(1);
}
.achievement-row.unlocked {
  opacity: 1;
  filter: none;
}
.achievement-row .icon { font-size: 26px; flex-shrink: 0; }
.achievement-row .info { text-align: left; }
.achievement-row .name { font-size: 16px; color: var(--phosphor); }
.achievement-row .desc { font-size: 13px; color: #c9c4b6; line-height: 1.4; }

/* --- Fase 2, Parte 2: Menu Principal --- */
.console-body {
  position: relative; /* faz o menu (position:absolute) cobrir TODA essa área, não só o canvas */
}

.main-menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4; /* fica abaixo do overlay de vitória/stats (z-index 5), acima do jogo */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6%;
  gap: 12px;
  background: radial-gradient(ellipse at center, #171f17 0%, #060806 100%);
  border-radius: 8px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  opacity: 1;
  overflow-y: auto;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.main-menu.hidden {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

.main-menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 300px;
}
.menu-btn {
  font-family: var(--game-font, 'Courier New', monospace); letter-spacing: var(--game-letter-spacing, normal);
  font-size: 14px;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #2a2a2a, #161616);
  color: var(--phosphor);
  border: 1px solid #3d3d3d;
  border-radius: 8px;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.menu-btn:hover,
.menu-btn:active {
  background: linear-gradient(180deg, var(--amber), #b97a20);
  color: #1a1200;
  border-color: var(--amber);
  transform: translateX(3px);
}

/* --- Transição suave ao trocar de tela dentro do console --- */
.gameplay-controls {
  animation: fadeSlideIn 0.3s ease;
}
@keyframes fadeSlideIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- Ranking --- */
.ranking-my-position {
  font-size: 15px;
  color: var(--amber);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #333;
}
.ranking-list {
  text-align: left;
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 12px;
  font-size: 15px;
}
.ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid #2a2a2a;
}
.ranking-row .rank {
  width: 26px;
  flex-shrink: 0;
  color: var(--amber);
  font-weight: bold;
}
.ranking-row .rname {
  flex: 1;
  color: var(--phosphor);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-row .rscore {
  color: var(--amber);
  font-weight: bold;
  flex-shrink: 0;
}
.ranking-row .rmode {
  font-size: 12px;
  color: #cdc7b8;
  flex-shrink: 0;
  width: 64px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ranking-empty {
  font-size: 14px;
  color: #cdc7b8;
  text-align: center;
  padding: 20px 0;
}

/* --- Configurações / Créditos (texto simples dentro do overlay) --- */
.settings-body, .credits-body {
  text-align: left;
  font-size: 15px;
  line-height: 1.7;
  color: var(--phosphor);
}
.settings-body div { margin-bottom: 8px; }
.settings-body b, .credits-body b { color: var(--amber); }

/* --- Fase 2, Parte 3: Moedas e Loja --- */
.coin-display {
  font-size: 15px;
  color: var(--amber);
  font-weight: bold;
  letter-spacing: 0.5px;
}

.shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  justify-content: center;
}
.shop-tab {
  font-family: var(--game-font, 'Courier New', monospace); letter-spacing: var(--game-letter-spacing, normal);
  font-size: 13px;
  background: linear-gradient(180deg, #333, #1c1c1c);
  color: var(--phosphor);
  border: 1px solid #444;
  border-radius: 12px;
  padding: 5px 10px;
  cursor: pointer;
}
.shop-tab.active {
  background: linear-gradient(180deg, var(--amber), #b97a20);
  color: #1a1200;
  border-color: var(--amber);
}

.shop-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.shop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  background: #00000030;
}
.shop-item.equipped {
  border-color: var(--amber);
  background: rgba(232,163,61,0.08);
}
.shop-item-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.3);
}
.shop-item-name {
  flex: 1;
  font-size: 15px;
  color: var(--phosphor);
  text-align: left;
}
.shop-status.equipped {
  font-size: 12px;
  color: var(--amber);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.shop-action {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 13px;
}

/* --- Fase 2, Parte 4: reflexo/relevo sutil nos botões (efeito "físico") --- */
.start-btn, .champ-btn, .menu-btn, .dial-btn, .target-btn, .pad-btn, .shop-tab, .overlay-btn {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -3px 5px rgba(0,0,0,0.25);
}

/* --- Fase 2, Parte 6: Splash Screen (Etapa 13) --- */
.splash-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #201812 0%, #0c0a08 100%);
  transition: opacity 0.5s ease;
}
.splash-screen.hidden {
  opacity: 0;
  pointer-events: none;
}
.splash-title {
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 30px;
  line-height: 1.2;
  text-align: center;
  color: var(--phosphor);
  text-shadow: 0 0 16px rgba(200,230,192,0.6);
  letter-spacing: 1px;
  animation: splashPulse 1.4s ease-in-out infinite;
}
.splash-sub {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--amber);
}
@keyframes splashPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* --- Fase 2, Parte 7: Nível/XP e Missões --- */
.level-block {
  margin-bottom: 14px;
  text-align: left;
}
.level-label {
  font-size: 14px;
  color: var(--phosphor);
  margin-bottom: 4px;
}
.level-label b { color: var(--amber); }
.level-bar {
  height: 8px;
  border-radius: 4px;
  background: #1c1c1c;
  border: 1px solid #333;
  overflow: hidden;
}
.level-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--amber), #f2c96b);
  transition: width 0.4s ease;
}

.missions-title {
  font-size: 16px;
  color: var(--amber);
  text-align: left;
  margin: 14px 0 8px;
  letter-spacing: 0.5px;
}
.missions-list {
  text-align: left;
  margin-bottom: 12px;
}
.mission-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid #2a2a2a;
  opacity: 0.75;
}
.mission-row.done {
  opacity: 1;
}
.mission-row .icon { font-size: 22px; flex-shrink: 0; }
.mission-row .info { text-align: left; flex: 1; }
.mission-row .name { font-size: 15px; color: var(--phosphor); }
.mission-row .progress { font-size: 12px; color: #cdc7b8; }
.mission-row.done .progress { color: var(--amber); }

/* --- Manual (Como Jogar) --- */
.help-body {
  text-align: left;
  max-height: 320px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.55;
  color: var(--phosphor);
}
.help-section {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2a2a2a;
}
.help-section:last-child { border-bottom: none; margin-bottom: 0; }
.help-title {
  font-size: 16px;
  color: var(--amber);
  font-weight: bold;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.help-body b { color: var(--amber); }

/* --- Login/perfil dentro do próprio menu principal --- */
.menu-profile-login {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 260px;
  margin-bottom: 6px;
}
.menu-profile-login input {
  flex: 1;
  min-width: 0;
  font-family: var(--game-font, 'Courier New', monospace);
  letter-spacing: var(--game-letter-spacing, normal);
  background: #111;
  color: var(--phosphor);
  border: 1px solid #444;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  outline: none;
}
.menu-profile-login input:focus { border-color: var(--amber); }
.menu-profile-login input::placeholder { color: #cfcabd; }

.menu-profile-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* --- "77" como marca d'água na tela do menu --- */
.menu-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: min(45vw, 220px);
  color: var(--amber);
  opacity: 0.07;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  white-space: nowrap;
}
.menu-profile-login, .menu-profile-info, .main-menu-buttons {
  position: relative;
  z-index: 1;
}

.menu-login-hint {
  font-size: 13px;
  color: #cdc7b8;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* --- Telas estreitas: setas mais compactas, pra nunca precisar de rolagem extra --- */
@media (max-width: 400px) {
  .pad-btn {
    width: 96px;
    padding: 10px 0;
    font-size: 19px;
  }
  .quick-start-row { gap: 6px; }
  .touch-controls { gap: 6px; margin-top: 10px; }
  .score-panel { font-size: 14px; }
  .start-btn { padding: 6px 12px; font-size: 13px; }
}

/* --- Loja: assistir anúncio por moedas --- */
.shop-ad-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(232,163,61,0.08);
  border: 1px solid rgba(232,163,61,0.3);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--phosphor);
}
.shop-ad-row.disabled {
  opacity: 0.55;
  border-color: #444;
  background: rgba(255,255,255,0.03);
}
.shop-ad-row .shop-action {
  white-space: nowrap;
  font-size: 13px;
}

@font-face { font-family: 'Press Start 2P'; src: url('fonts/pressstart.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'VT323'; src: url('fonts/vt323.woff2') format('woff2'); font-display: swap; }

/* ===== TEMA PIXEL (opcional, body.ui-pixel) ===== */
/* =====================================================================
   TEMA PIXEL ART (v3) — visual de TODA a interface em estilo 16 bits.
   A área do jogo (canvas + moldura da tela CRT) NÃO é alterada.
   Fontes: Press Start 2P e VT323 (licença OFL, arquivos em /fonts).
   ===================================================================== */
body.ui-pixel {
  --o: #0b0d1a;          /* contorno */
  --px-ink: #1a1c2c;
  --px-navy: #29366f;
  --px-blue: #3b5dc9;
  --px-sky: #41a6f6;
  --px-cyan: #73eff7;
  --px-white: #f4f4f4;
  --px-gray: #94b0c2;
  --px-slate: #566c86;
  --px-dark: #333c57;
  --px-green: #38b764;
  --px-lime: #a7f070;
  --px-yellow: #ffcd75;
  --px-orange: #ef7d57;
  --px-red: #b13e53;
  --px-purple: #5d275d;
  --amber: #ffcd75;
  --phosphor: #f4f4f4;
  --px-title: 'Press Start 2P', 'Courier New', monospace;
  --game-font: 'VT323', 'Courier New', monospace;
  --panel-border: #0b0d1a;
}
body.ui-pixel { image-rendering: pixelated; }
body.ui-pixel {
  background-color: #1a1c2c;
  background-image:
    conic-gradient(#20233a 25%, transparent 0 50%, #20233a 0 75%, transparent 0);
  background-size: 16px 16px;
  color: var(--px-white);
  font-size: 20px;
}
/* chão de pixel (grama + terra) no rodapé da página */
body.ui-pixel::before {
  content: "";
  position: fixed; left: 0; right: 0; bottom: 0; height: 40px;
  z-index: -1; pointer-events: none;
  background:
    linear-gradient(#a7f070 0 8px, #38b764 8px 16px, transparent 16px),
    repeating-linear-gradient(90deg, #5d275d 0 16px, #4a1f4a 16px 32px);
  box-shadow: 0 -4px 0 0 var(--o);
}
/* ---------- Console ---------- */
body.ui-pixel .console {
  border: 0;
  border-radius: 0;
  background: var(--px-navy);
  box-shadow:
    0 -4px 0 0 var(--o), 0 4px 0 0 var(--o), -4px 0 0 0 var(--o), 4px 0 0 0 var(--o),
    10px 10px 0 0 rgba(0,0,0,0.45),
    inset 0 0 0 4px var(--px-blue),
    inset 0 0 0 8px var(--o);
  margin: 4px;
}
body.ui-pixel .screw {
  width: 8px; height: 8px; border-radius: 0;
  background: var(--px-yellow);
  box-shadow: 0 0 0 2px var(--o), inset -2px -2px 0 0 var(--px-orange);
  animation: pxBlink 1.6s steps(2) infinite;
}
body.ui-pixel .screw::after { display: none; }
body.ui-pixel .screw-tr { background: var(--px-lime); box-shadow: 0 0 0 2px var(--o), inset -2px -2px 0 0 var(--px-green); animation-delay: .4s; }
body.ui-pixel .screw-bl { background: var(--px-cyan); box-shadow: 0 0 0 2px var(--o), inset -2px -2px 0 0 var(--px-sky); animation-delay: .8s; }
body.ui-pixel .screw-br { background: var(--px-orange); box-shadow: 0 0 0 2px var(--o), inset -2px -2px 0 0 var(--px-red); animation-delay: 1.2s; }
@keyframes pxBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .35; } }
/* ---------- Cabeçalho ---------- */
body.ui-pixel .wood-strip {
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, var(--px-red) 0 16px, #c24a5f 16px 32px);
  border-bottom: 4px solid var(--o);
  box-shadow: inset 0 4px 0 0 rgba(255,255,255,0.25), inset 0 -4px 0 0 rgba(0,0,0,0.25);
}
body.ui-pixel .brand {
  font-family: var(--px-title);
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--px-white);
  text-shadow: 3px 3px 0 var(--o);
}
body.ui-pixel .brand-sub {
  font-family: var(--game-font);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--px-yellow);
  background: var(--o);
  border-radius: 0;
  border: 0;
  padding: 0 8px;
  text-shadow: none;
}
body.ui-pixel .power-led {
  width: 8px; height: 8px; border-radius: 0;
  background: var(--px-lime);
  box-shadow: 0 0 0 2px var(--o);
  animation: pxBlink 1.6s steps(2) infinite;
}
/* ---------- Botões pixel (blocos com contorno e "degrau") ---------- */
body.ui-pixel .start-btn,
body.ui-pixel .champ-btn,
body.ui-pixel .menu-btn,
body.ui-pixel .dial-btn,
body.ui-pixel .target-btn,
body.ui-pixel .pad-btn,
body.ui-pixel .shop-tab,
body.ui-pixel .overlay-btn,
body.ui-pixel .shop-action {
  --b: var(--px-sky);
  --fg: var(--o);
  font-family: var(--px-title);
  font-weight: normal;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: uppercase;
  background: var(--b);
  color: var(--fg);
  border: 0;
  border-radius: 0;
  text-shadow: none;
  margin: 4px;
  box-shadow:
    0 -4px 0 0 var(--o), -4px 0 0 0 var(--o), 4px 0 0 0 var(--o),
    0 8px 0 0 var(--o),
    inset 4px 4px 0 0 rgba(255,255,255,0.45),
    inset -4px -4px 0 0 rgba(0,0,0,0.28);
  transition: none;
  -webkit-tap-highlight-color: transparent;
}
body.ui-pixel .start-btn:hover,
body.ui-pixel .champ-btn:hover,
body.ui-pixel .menu-btn:hover,
body.ui-pixel .dial-btn:hover,
body.ui-pixel .target-btn:hover,
body.ui-pixel .shop-tab:hover,
body.ui-pixel .overlay-btn:hover,
body.ui-pixel .shop-action:hover { filter: brightness(1.1); }
body.ui-pixel .start-btn:active,
body.ui-pixel .champ-btn:active,
body.ui-pixel .menu-btn:active,
body.ui-pixel .dial-btn:active,
body.ui-pixel .target-btn:active,
body.ui-pixel .pad-btn:active,
body.ui-pixel .shop-tab:active,
body.ui-pixel .overlay-btn:active,
body.ui-pixel .shop-action:active {
  transform: translateY(4px);
  box-shadow:
    0 -4px 0 0 var(--o), -4px 0 0 0 var(--o), 4px 0 0 0 var(--o),
    0 4px 0 0 var(--o),
    inset 4px 4px 0 0 rgba(0,0,0,0.25),
    inset -4px -4px 0 0 rgba(255,255,255,0.15);
}
body.ui-pixel .champ-btn:disabled,
body.ui-pixel .shop-action:disabled { opacity: .55; filter: grayscale(.6); }
body.ui-pixel .champ-btn:disabled:active,
body.ui-pixel .shop-action:disabled:active { transform: none; }
body.ui-pixel .start-btn { --b: var(--px-orange); padding: 10px 14px; }
body.ui-pixel #menuBtn,
body.ui-pixel #soundBtn {
  --b: var(--px-purple); --fg: var(--px-white);
  background: var(--px-purple) !important;
  border: 0 !important;
}
body.ui-pixel .champ-btn,
body.ui-pixel .practice-btn { --b: var(--px-sky); padding: 9px 12px; }
body.ui-pixel .champ-btn.active,
body.ui-pixel .practice-btn.active,
body.ui-pixel .dial-btn.active,
body.ui-pixel .target-btn.active,
body.ui-pixel .shop-tab.active {
  --b: var(--px-lime); --fg: var(--o);
  background: var(--px-lime);
  border: 0; color: var(--o);
}
body.ui-pixel .dial-btn,
body.ui-pixel .target-btn,
body.ui-pixel .shop-tab {
  --b: var(--px-dark); --fg: var(--px-white);
  font-size: 9px;
  padding: 8px 10px;
}
/* menu principal: botões largos, cada um de uma cor */
body.ui-pixel .main-menu-buttons { gap: 14px; }
body.ui-pixel .menu-btn {
  font-size: 11px;
  text-align: left;
  padding: 12px 14px;
  width: calc(100% - 8px);
}
body.ui-pixel .menu-btn:hover { transform: none; background: var(--b); color: var(--fg); border: 0; }
body.ui-pixel .main-menu-buttons .menu-btn:nth-child(1) { --b: var(--px-lime); }
body.ui-pixel .main-menu-buttons .menu-btn:nth-child(2) { --b: var(--px-yellow); }
body.ui-pixel .main-menu-buttons .menu-btn:nth-child(3) { --b: var(--px-cyan); }
body.ui-pixel .main-menu-buttons .menu-btn:nth-child(4) { --b: var(--px-orange); }
body.ui-pixel .main-menu-buttons .menu-btn:nth-child(5) { --b: var(--px-sky); }
body.ui-pixel .main-menu-buttons .menu-btn:nth-child(6) { --b: var(--px-yellow); }
body.ui-pixel .main-menu-buttons .menu-btn:nth-child(7) { --b: var(--px-gray); }
body.ui-pixel .main-menu-buttons .menu-btn:nth-child(8) { --b: var(--px-lime); }
body.ui-pixel .main-menu-buttons .menu-btn:nth-child(9) { --b: var(--px-orange); }
/* direcionais */
body.ui-pixel .pad-btn {
  --b: var(--px-cyan);
  font-size: 22px;
  padding: 14px 0;
  width: 112px;
  margin: 4px 4px 8px;
}
body.ui-pixel .pad-btn:active { background: var(--px-lime); color: var(--o); }
/* ---------- Textos e painéis ---------- */
body.ui-pixel .score-panel {
  font-family: var(--game-font);
  font-size: 28px;
  line-height: 1;
  color: var(--px-lime);
  background: var(--o);
  border: 0; border-radius: 0;
  padding: 6px 10px;
  box-shadow: 0 0 0 4px var(--px-dark);
  text-shadow: 2px 2px 0 var(--px-green);
  font-variant-numeric: tabular-nums;
}
body.ui-pixel .timer-panel { font-size: 20px; color: var(--px-yellow); text-shadow: 2px 2px 0 var(--o); }
body.ui-pixel .instructions { font-size: 19px; line-height: 1.3; color: var(--px-gray); letter-spacing: 0; }
body.ui-pixel .instructions b { color: var(--px-yellow); }
body.ui-pixel .footer-label { font-size: 16px; color: var(--px-gray); letter-spacing: 1px; }
body.ui-pixel .champ-panel,
body.ui-pixel .ranking-my-position {
  background: var(--o);
  border: 0; border-radius: 0;
  box-shadow: 0 0 0 4px var(--px-dark);
  color: var(--px-yellow);
  font-size: 19px;
}
body.ui-pixel .profile-name,
body.ui-pixel .menu-profile-info .profile-name { font-family: var(--px-title); font-size: 11px; color: var(--px-yellow); text-shadow: 2px 2px 0 var(--o); font-weight: normal; }
body.ui-pixel .coin-display { font-size: 22px; color: var(--px-yellow); text-shadow: 2px 2px 0 var(--o); font-weight: normal; }
body.ui-pixel .target-label,
body.ui-pixel .menu-login-hint { font-size: 19px; color: var(--px-gray); }
/* ---------- Menu principal ---------- */
body.ui-pixel .main-menu {
  border-radius: 0;
  background:
    conic-gradient(#222a5c 25%, transparent 0 50%, #222a5c 0 75%, transparent 0),
    var(--px-ink);
  background-size: 16px 16px, auto;
  box-shadow: inset 0 0 0 4px var(--o);
}
body.ui-pixel .menu-watermark { font-family: var(--px-title); color: var(--px-yellow); opacity: .12; -webkit-text-fill-color: currentColor; filter: none; }
body.ui-pixel .profile-login input,
body.ui-pixel .menu-profile-login input {
  font-family: var(--game-font);
  font-size: 22px;
  background: var(--o);
  color: var(--px-white);
  border: 0;
  border-radius: 0;
  padding: 8px 12px;
  margin: 4px;
  box-shadow: 0 0 0 4px var(--px-slate);
}
body.ui-pixel .profile-login input:focus,
body.ui-pixel .menu-profile-login input:focus { outline: none; box-shadow: 0 0 0 4px var(--px-yellow); }
body.ui-pixel .profile-login input::placeholder,
body.ui-pixel .menu-profile-login input::placeholder { color: var(--px-slate); }
/* ---------- Telas (overlay) ---------- */
body.ui-pixel .overlay {
  background:
    conic-gradient(#222a5c 25%, transparent 0 50%, #222a5c 0 75%, transparent 0),
    rgba(26,28,44,0.97);
  background-size: 16px 16px, auto;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.ui-pixel .overlay-box {
  background: var(--px-navy);
  border: 0; border-radius: 0;
  padding: 18px 16px 16px;
  margin: 4px;
  width: calc(100% - 8px);
  box-shadow:
    0 -4px 0 0 var(--o), 0 4px 0 0 var(--o), -4px 0 0 0 var(--o), 4px 0 0 0 var(--o),
    8px 8px 0 0 rgba(0,0,0,.45),
    inset 0 0 0 4px var(--px-blue);
}
body.ui-pixel .overlay-title {
  font-family: var(--px-title);
  font-style: normal; font-weight: normal;
  font-size: 16px; line-height: 1.5;
  color: var(--px-yellow);
  background: none; -webkit-text-fill-color: currentColor;
  filter: none;
  text-shadow: 3px 3px 0 var(--px-red), 3px 3px 0 var(--o);
  letter-spacing: 0;
}
body.ui-pixel .overlay-msg { font-size: 21px; line-height: 1.25; color: var(--px-white); }
body.ui-pixel .overlay-actions { gap: 14px; }
body.ui-pixel .overlay-btn { --b: var(--px-yellow); padding: 10px 14px; }
body.ui-pixel .overlay-btn.secondary { --b: var(--px-dark); --fg: var(--px-white); background: var(--px-dark); color: var(--px-white); border: 0; }
body.ui-pixel .stats-grid,
body.ui-pixel .stats-grid div { font-size: 20px; }
body.ui-pixel .stats-grid div,
body.ui-pixel .ranking-row,
body.ui-pixel .achievement-row,
body.ui-pixel .mission-row,
body.ui-pixel .help-section { border-color: var(--px-dark); }
body.ui-pixel .stats-grid div b,
body.ui-pixel .settings-body b,
body.ui-pixel .credits-body b,
body.ui-pixel .help-body b,
body.ui-pixel .level-label b { color: var(--px-yellow); }
body.ui-pixel .settings-body,
body.ui-pixel .credits-body,
body.ui-pixel .help-body { font-size: 20px; line-height: 1.25; }
body.ui-pixel .help-title { font-family: var(--px-title); font-size: 11px; color: var(--px-lime); line-height: 1.5; }
body.ui-pixel .achievement-row { background: var(--o); border: 0; border-radius: 0; margin-bottom: 8px; box-shadow: 0 0 0 3px var(--px-dark); }
body.ui-pixel .achievement-row.unlocked { background: #0f2a1a; box-shadow: 0 0 0 3px var(--px-green); }
body.ui-pixel .achievement-row .name,
body.ui-pixel .mission-row .name { font-size: 21px; color: var(--px-white); font-weight: normal; }
body.ui-pixel .achievement-row .desc,
body.ui-pixel .mission-row .progress { font-size: 18px; color: var(--px-gray); }
body.ui-pixel .mission-row { background: var(--o); border: 0; border-radius: 0; margin-bottom: 8px; box-shadow: 0 0 0 3px var(--px-dark); }
body.ui-pixel .mission-row.done { background: #0f2a1a; box-shadow: 0 0 0 3px var(--px-green); }
body.ui-pixel .mission-row.done .progress { color: var(--px-lime); }
body.ui-pixel .missions-title { font-family: var(--px-title); font-size: 11px; color: var(--px-yellow); }
body.ui-pixel .ranking-row { background: var(--o); border: 0; border-radius: 0; margin-bottom: 6px; font-size: 20px; box-shadow: 0 0 0 3px var(--px-dark); }
body.ui-pixel .ranking-row .rank { color: var(--px-yellow); }
body.ui-pixel .ranking-row .rscore { color: var(--px-cyan); }
body.ui-pixel .ranking-row .rmode { font-size: 17px; }
body.ui-pixel .level-label { font-size: 19px; }
body.ui-pixel .level-bar {
  background: var(--o);
  border: 0; border-radius: 0; overflow: hidden;
  box-shadow: 0 0 0 3px var(--px-slate);
}
body.ui-pixel .level-bar-fill {
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.35) 6px 8px),
    var(--px-lime);
  box-shadow: none;
}
/* ---------- Loja ---------- */
body.ui-pixel .shop-item { background: var(--o); border: 0; border-radius: 0; margin-bottom: 8px; box-shadow: 0 0 0 3px var(--px-dark); }
body.ui-pixel .shop-item.equipped { background: #0f2a1a; box-shadow: 0 0 0 3px var(--px-lime); }
body.ui-pixel .shop-item-swatch { border-radius: 0; border: 2px solid var(--px-white); }
body.ui-pixel .shop-item-name { font-size: 21px; color: var(--px-white); font-weight: normal; }
body.ui-pixel .shop-status.equipped { color: var(--px-lime); font-size: 19px; }
body.ui-pixel .shop-action { --b: var(--px-cyan); font-size: 9px; padding: 8px 10px; }
body.ui-pixel .shop-tabs { gap: 10px; }
body.ui-pixel .shop-ad-row { background: var(--o); border: 0; border-radius: 0; box-shadow: 0 0 0 3px var(--px-orange); font-size: 19px; color: var(--px-white); }
body.ui-pixel .shop-ad-row.disabled { box-shadow: 0 0 0 3px var(--px-dark); background: var(--o); }
body.ui-pixel .shop-ad-row .shop-action { --b: var(--px-yellow); }
/* ---------- Conquista (aviso no topo) ---------- */
body.ui-pixel .achievement-toast {
  background: var(--px-navy);
  border: 0; border-radius: 0;
  box-shadow: 0 -4px 0 0 var(--o), 0 4px 0 0 var(--o), -4px 0 0 0 var(--o), 4px 0 0 0 var(--o), inset 0 0 0 4px var(--px-yellow);
}
body.ui-pixel .achievement-toast-title { font-family: var(--px-title); font-size: 8px; color: var(--px-yellow); }
body.ui-pixel .achievement-toast-name { font-size: 20px; color: var(--px-white); }
/* ---------- Abertura ---------- */
body.ui-pixel .splash-screen {
  background:
    conic-gradient(#222a5c 25%, transparent 0 50%, #222a5c 0 75%, transparent 0),
    var(--px-ink);
  background-size: 16px 16px, auto;
}
body.ui-pixel .splash-title {
  font-family: var(--px-title);
  font-style: normal; font-weight: normal;
  font-size: 22px; line-height: 1.6;
  color: var(--px-yellow);
  background: none; -webkit-text-fill-color: currentColor; filter: none;
  text-shadow: 4px 4px 0 var(--px-red), 4px 4px 0 var(--o);
  animation: pxBlink 1.2s steps(2) infinite;
}
body.ui-pixel .splash-sub { font-family: var(--px-title); font-size: 10px; color: var(--px-cyan); text-shadow: 2px 2px 0 var(--o); letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
body.ui-pixel .screw,
body.ui-pixel .power-led,
body.ui-pixel .splash-title { animation: none; }
}
/* ajuste: botão do anúncio premiado não pode estourar a caixa com a fonte pixel */
body.ui-pixel .shop-ad-row { flex-wrap: wrap; justify-content: center; text-align: center; }
body.ui-pixel .shop-ad-row .shop-action { white-space: normal; font-size: 8px; max-width: 100%; }
body.ui-pixel .screen-frame.gfx3d {
  padding: 6px; background: #05060f; border: 4px solid var(--o); border-radius: 0;
  box-shadow: 0 0 0 4px var(--px-slate), 0 0 24px rgba(65,166,246,.35);
}


/* ---------- Modo 3D: a cena WebGL cobre o canvas 2D (que fica invisível, só recebe o toque) ---------- */
#game3d { display: none; position: absolute; pointer-events: none; z-index: 1; background: #05060f; image-rendering: auto; }
.screen-frame.gfx3d #game { opacity: 0; }
.screen-frame.gfx3d::before, .screen-frame.gfx3d::after, .screen-frame.gfx3d .screen-glass { display: none; }


/* =====================================================================
   TEMA PREMIUM 3D (padrão, body.ui-premium)
   Interface moderna que combina com a arena 3D: vidro escuro, botões
   "gordinhos" com brilho e profundidade, ícones vetoriais, dourado + azul.
   ===================================================================== */
body.ui-premium {
  --gold: #ffc94d;
  --gold-2: #ff9f1c;
  --ice: #8fd3ff;
  --ink-1: #070b1a;
  --ink-2: #0c1330;
  --ink-3: #141f4a;
  --line: rgba(160,190,255,0.18);
  --amber: #ffc94d;
  --phosphor: #eef4ff;
  --txt: #dbe6ff;
  --txt-dim: #9fb3e6;
  background-color: var(--ink-1);
  background-image:
    radial-gradient(1100px 650px at 50% -8%, #22397f 0%, transparent 62%),
    radial-gradient(800px 600px at 105% 105%, #3a2166 0%, transparent 58%),
    radial-gradient(700px 500px at -10% 90%, #0d4a63 0%, transparent 60%);
  background-attachment: fixed;
  color: var(--txt);
  font-size: 15px;
}
body.ui-premium::before { display: none; }

/* ---------- Console ---------- */
body.ui-premium .console {
  border-radius: 28px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 22%),
    linear-gradient(180deg, #16224f, #0a1130);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 22%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-black) 25%, #18265a), color-mix(in srgb, var(--panel-black) 25%, #090f2b));
  box-shadow:
    0 40px 90px rgba(0,0,0,0.7),
    0 0 0 1px rgba(0,0,0,0.65),
    0 0 60px rgba(70,120,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -30px 50px rgba(0,0,0,0.35);
}
body.ui-premium .screw {
  width: 7px; height: 7px;
  background: radial-gradient(circle at 35% 30%, #fff3c2, #d9a52b 55%, #7a5410 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.7);
  animation: none;
}
body.ui-premium .screw::after { display: none; }
body.ui-premium .screw-tr, body.ui-premium .screw-bl, body.ui-premium .screw-br {
  background: radial-gradient(circle at 35% 30%, #fff3c2, #d9a52b 55%, #7a5410 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.7);
}

/* ---------- Cabeçalho (logo) ---------- */
body.ui-premium .wood-strip {
  border-radius: 27px 27px 0 0;
  min-height: 58px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #2c4a9a, #1a2c66);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--wood-mid) 38%, #2c4a9a), color-mix(in srgb, var(--wood-dark) 38%, #1a2c66));
  border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -3px 0 rgba(255,201,77,0.85), 0 6px 18px rgba(0,0,0,0.4);
}
body.ui-premium .brand {
  font-family: var(--game-font);
  font-style: italic;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #fff6d6 0%, #ffd45c 45%, #ff9f1c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 0 rgba(60,30,0,.55)) drop-shadow(0 0 10px rgba(255,180,50,.35));
}
body.ui-premium .brand-sub {
  font-family: var(--game-font);
  font-size: 11px; font-weight: 800; letter-spacing: 3px;
  color: var(--ice);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(143,211,255,.35);
  border-radius: 99px;
  padding: 2px 10px;
}
body.ui-premium .power-led {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #5dff9a 45%, #0b8a3d);
  box-shadow: 0 0 10px 3px rgba(93,255,154,.7);
}

/* ---------- Botões 3D ---------- */
body.ui-premium .start-btn,
body.ui-premium .champ-btn,
body.ui-premium .menu-btn,
body.ui-premium .pad-btn,
body.ui-premium .overlay-btn,
body.ui-premium .shop-action {
  --bt: #6ec1ff; --bb: #2a79ea; --be: #14459c; --fg: #ffffff; --dp: 5px;
  font-family: var(--game-font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .8px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fg);
  background: linear-gradient(180deg, var(--bt), var(--bb));
  border: 0;
  border-radius: 14px;
  margin: 0 0 var(--dp);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  box-shadow:
    0 var(--dp) 0 var(--be),
    0 calc(var(--dp) + 5px) 14px rgba(0,0,0,.45),
    inset 0 1.5px 0 rgba(255,255,255,.6),
    inset 0 -2px 0 rgba(0,0,0,.16);
  transition: transform .07s ease, box-shadow .07s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
body.ui-premium .start-btn:hover, body.ui-premium .champ-btn:hover, body.ui-premium .menu-btn:hover,
body.ui-premium .overlay-btn:hover, body.ui-premium .shop-action:hover { filter: brightness(1.08) saturate(1.08); transform: none; }
body.ui-premium .start-btn:active, body.ui-premium .champ-btn:active, body.ui-premium .menu-btn:active,
body.ui-premium .pad-btn:active, body.ui-premium .overlay-btn:active, body.ui-premium .shop-action:active {
  transform: translateY(calc(var(--dp) - 1px));
  box-shadow: 0 1px 0 var(--be), 0 3px 8px rgba(0,0,0,.4), inset 0 3px 8px rgba(0,0,0,.28);
  filter: brightness(1.04);
}
body.ui-premium .champ-btn:disabled, body.ui-premium .shop-action:disabled { opacity: .5; filter: grayscale(.5); }
body.ui-premium .champ-btn:disabled:active, body.ui-premium .shop-action:disabled:active { transform: none; box-shadow: 0 var(--dp) 0 var(--be); }

body.ui-premium .start-btn { --bt: #ffb255; --bb: #f06a1d; --be: #9c3a08; padding: 10px 20px; border-radius: 99px; }
body.ui-premium #menuBtn, body.ui-premium #soundBtn {
  --bt: #7f8fe8; --bb: #4a58c4; --be: #262f80;
  background: linear-gradient(180deg, var(--bt), var(--bb)) !important;
  border: 0 !important;
  padding: 9px 14px;
}
body.ui-premium .champ-btn, body.ui-premium .practice-btn {
  --bt: #7f8fe8; --bb: #4a58c4; --be: #262f80;
  padding: 9px 14px; border-radius: 99px; border: 0;
}
body.ui-premium .overlay-btn { --bt: #ffd45c; --bb: #f59e0b; --be: #a45f00; --fg: #3a2300; text-shadow: 0 1px 0 rgba(255,255,255,.4); padding: 10px 18px; border-radius: 99px; }
body.ui-premium .overlay-btn.secondary {
  --bt: #7f8fe8; --bb: #4a58c4; --be: #262f80; --fg: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4);
  background: linear-gradient(180deg, var(--bt), var(--bb)); border: 0; color: #fff;
}
body.ui-premium .shop-action { --dp: 4px; padding: 8px 14px; border-radius: 99px; --bt:#6ec1ff; --bb:#2a79ea; --be:#14459c; font-size: 12px; }

/* seletores (modo / dificuldade / metas / abas) = chips de vidro; selecionado = dourado */
body.ui-premium .dial-btn, body.ui-premium .target-btn, body.ui-premium .shop-tab {
  font-family: var(--game-font);
  font-weight: 800; font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--txt);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(160,190,255,0.28);
  border-radius: 99px;
  padding: 8px 14px;
  margin: 0;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 rgba(0,0,0,.35);
  transition: transform .07s ease, background .15s ease;
}
body.ui-premium .dial-btn:hover, body.ui-premium .target-btn:hover, body.ui-premium .shop-tab:hover { background: rgba(255,255,255,0.13); filter: none; }
body.ui-premium .dial-btn:active, body.ui-premium .target-btn:active, body.ui-premium .shop-tab:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0,0,0,.4); }
body.ui-premium .dial-btn.active, body.ui-premium .target-btn.active, body.ui-premium .shop-tab.active,
body.ui-premium .champ-btn.active, body.ui-premium .practice-btn.active {
  --bt: #ffe27a; --bb: #ffae1a; --be: #a45f00;
  color: #3a2300;
  background: linear-gradient(180deg, #ffe27a, #ffae1a);
  border: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  box-shadow: 0 3px 0 #a45f00, 0 6px 16px rgba(255,170,30,.45), inset 0 1.5px 0 rgba(255,255,255,.7);
}

/* ---------- Menu principal ---------- */
body.ui-premium .main-menu {
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(80,130,255,0.25), transparent 60%),
    linear-gradient(180deg, #121c46, #080d26);
  box-shadow: inset 0 0 0 1px var(--line);
}
body.ui-premium .console-body.showcase .main-menu {
  background: linear-gradient(180deg, rgba(6,10,28,0) 0, rgba(6,10,28,0) 70px, rgba(7,12,36,.92) 215px, #070c24 250px, #070c24 100%);
}
body.ui-premium .menu-btn {
  --dp: 5px;
  display: flex; align-items: center; gap: 12px;
  text-align: left;
  font-size: 14px;
  padding: 11px 16px;
  width: 100%;
  border-radius: 16px;
}
body.ui-premium .menu-btn::before {
  content: ''; flex: 0 0 22px; width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
body.ui-premium .menu-btn:hover { background: linear-gradient(180deg, var(--bt), var(--bb)); color: var(--fg); transform: none; }
body.ui-premium .menu-watermark { display: none; }
body.ui-premium .menu-login-hint { color: var(--txt-dim); font-size: 14px; }

/* ---------- direcionais ▲▼ ---------- */
body.ui-premium .pad-btn {
  --bt: #7fd6ff; --bb: #3a7bf0; --be: #1a469f; --dp: 8px;
  font-size: 24px; padding: 14px 0; width: 120px; border-radius: 22px; margin: 0 0 var(--dp);
}
body.ui-premium .pad-btn:active { background: linear-gradient(180deg, #ffe27a, #ffae1a); color: #3a2300; }
body.ui-premium .pad-group { padding-bottom: 6px; }

/* ---------- Textos e painéis ---------- */
body.ui-premium .score-panel {
  font-family: var(--game-font);
  font-weight: 900; font-size: 20px; letter-spacing: 3px;
  color: #7dffb2;
  background: linear-gradient(180deg, #02060f, #07132a);
  border: 1px solid rgba(125,255,178,.35);
  border-radius: 12px;
  padding: 5px 14px;
  text-shadow: 0 0 10px rgba(125,255,178,.8);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.7), 0 0 14px rgba(125,255,178,.15);
  font-variant-numeric: tabular-nums;
}
body.ui-premium .timer-panel { font-size: 14px; font-weight: 800; color: var(--gold); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
body.ui-premium .instructions { font-size: 14px; color: var(--txt-dim); line-height: 1.55; letter-spacing: 0; }
body.ui-premium .instructions b { color: var(--gold); }
body.ui-premium .footer-label { font-size: 11px; color: var(--txt-dim); letter-spacing: 2px; }
body.ui-premium .champ-panel, body.ui-premium .ranking-my-position {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--gold);
  font-size: 14px;
}
body.ui-premium .profile-name, body.ui-premium .menu-profile-info .profile-name { font-family: var(--game-font); font-size: 16px; font-weight: 900; color: var(--gold); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
body.ui-premium .coin-display { font-size: 15px; font-weight: 800; color: var(--gold); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
body.ui-premium .target-label { font-size: 14px; color: var(--txt-dim); }

body.ui-premium .profile-login input, body.ui-premium .menu-profile-login input {
  font-family: var(--game-font);
  font-size: 15px; font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(160,190,255,.3);
  border-radius: 99px;
  padding: 11px 18px;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.45);
}
body.ui-premium .profile-login input:focus, body.ui-premium .menu-profile-login input:focus {
  outline: none; border-color: var(--gold); box-shadow: inset 0 3px 8px rgba(0,0,0,.45), 0 0 0 3px rgba(255,201,77,.25);
}
body.ui-premium .profile-login input::placeholder, body.ui-premium .menu-profile-login input::placeholder { color: #7184b8; }

/* ---------- Moldura da arena 3D ---------- */
body.ui-premium .screen-frame.gfx3d {
  padding: 6px; background: #04070f;
  border: 1px solid rgba(160,190,255,.35); border-radius: 18px;
  box-shadow: 0 0 0 2px #0a1030, 0 0 0 3px rgba(94,231,255,.55), 0 0 26px rgba(94,231,255,.25), 0 12px 30px rgba(0,0,0,.6), inset 0 0 20px rgba(0,0,0,.8);
}
body.ui-premium #game3d { border-radius: 12px; }

/* ---------- Telas (overlay) ---------- */
body.ui-premium .overlay {
  background: radial-gradient(ellipse at 50% 0%, rgba(70,110,255,.35), transparent 60%), rgba(4,7,20,.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body.ui-premium .overlay-box {
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px 16px 16px;
  box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2);
}
body.ui-premium .overlay-title {
  font-family: var(--game-font); font-style: italic; font-weight: 900;
  font-size: 28px; letter-spacing: 1px;
  background: linear-gradient(180deg, #fff6d6, #ffd45c 50%, #ff9f1c);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 0 rgba(60,30,0,.5));
}
body.ui-premium .overlay-msg { font-size: 15px; line-height: 1.55; color: var(--txt); }
body.ui-premium .overlay-actions { gap: 10px; }
body.ui-premium .stats-grid div, body.ui-premium .ranking-row, body.ui-premium .help-section { border-color: var(--line); }
body.ui-premium .stats-grid div b, body.ui-premium .settings-body b, body.ui-premium .credits-body b,
body.ui-premium .help-body b, body.ui-premium .level-label b { color: var(--gold); }
body.ui-premium .help-title, body.ui-premium .missions-title { font-family: var(--game-font); font-weight: 900; color: var(--gold); font-size: 15px; letter-spacing: .5px; }
body.ui-premium .achievement-row, body.ui-premium .mission-row, body.ui-premium .ranking-row, body.ui-premium .shop-item {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 8px;
}
body.ui-premium .achievement-row.unlocked, body.ui-premium .mission-row.done {
  background: rgba(93,255,154,.1); border-color: rgba(93,255,154,.5); box-shadow: 0 0 14px rgba(93,255,154,.15);
}
body.ui-premium .achievement-row .name, body.ui-premium .mission-row .name, body.ui-premium .shop-item-name { font-weight: 700; color: #fff; font-size: 15px; }
body.ui-premium .achievement-row .desc, body.ui-premium .mission-row .progress { color: var(--txt-dim); font-size: 13px; }
body.ui-premium .mission-row.done .progress { color: #7dffb2; }
body.ui-premium .ranking-row .rank { color: var(--gold); }
body.ui-premium .ranking-row .rscore { color: var(--ice); }
body.ui-premium .level-label { font-size: 14px; }
body.ui-premium .level-bar { height: 12px; background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }
body.ui-premium .level-bar-fill { background: linear-gradient(180deg, #ffe27a, #ff9f1c); box-shadow: 0 0 10px rgba(255,170,30,.7), inset 0 1px 0 rgba(255,255,255,.6); }

/* ---------- Loja ---------- */
body.ui-premium .shop-item.equipped { border-color: rgba(93,255,154,.7); background: rgba(93,255,154,.1); box-shadow: 0 0 14px rgba(93,255,154,.2); }
body.ui-premium .shop-item-swatch { border-radius: 50%; border: 2px solid rgba(255,255,255,.6); }
body.ui-premium .shop-status.equipped { color: #7dffb2; font-weight: 800; }
body.ui-premium .shop-ad-row { background: rgba(255,201,77,.1); border: 1px solid rgba(255,201,77,.5); border-radius: 16px; color: var(--txt); font-size: 14px; flex-wrap: wrap; justify-content: center; text-align: center; }
body.ui-premium .shop-ad-row.disabled { border-color: var(--line); background: rgba(255,255,255,.04); }
body.ui-premium .shop-ad-row .shop-action { white-space: normal; max-width: 100%; --bt:#ffe27a; --bb:#ffae1a; --be:#a45f00; --fg:#3a2300; text-shadow: 0 1px 0 rgba(255,255,255,.4); }

/* ---------- Aviso de conquista ---------- */
body.ui-premium .achievement-toast {
  background: linear-gradient(180deg, #1c2a63, #0e1740);
  border: 1px solid rgba(255,201,77,.7); border-radius: 18px;
  box-shadow: 0 0 24px rgba(255,201,77,.35), 0 14px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.2);
}
body.ui-premium .achievement-toast-title { color: var(--gold); font-weight: 800; }
body.ui-premium .achievement-toast-name { color: #fff; }

/* ---------- Abertura ---------- */
body.ui-premium .splash-screen {
  background: radial-gradient(ellipse at 50% 30%, #22397f, transparent 65%), #070b1a;
}
body.ui-premium .splash-title {
  font-family: var(--game-font); font-style: italic; font-weight: 900; font-size: 34px; line-height: 1.15; letter-spacing: 2px;
  background: linear-gradient(180deg, #fff6d6, #ffd45c 50%, #ff9f1c);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(60,30,0,.55)) drop-shadow(0 0 18px rgba(255,170,30,.4));
}
body.ui-premium .splash-sub { font-family: var(--game-font); color: var(--ice); font-weight: 800; letter-spacing: 6px; }

/* ---------- Faixa de ponto/gol e contagem regressiva ---------- */
.fx-banner, .fx-count {
  position: absolute; left: 50%; top: 50%; z-index: 6; pointer-events: none;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0; font-family: var(--game-font); font-weight: 900; font-style: italic;
  text-transform: uppercase; white-space: nowrap;
}
.fx-banner { font-size: 44px; letter-spacing: 3px; color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 24px currentColor; }
.fx-banner.good { color: #7dffb2; }
.fx-banner.bad { color: #ff7a8a; }
.fx-banner.show { animation: fxPop 1s ease-out forwards; }
@keyframes fxPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-6deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(2deg); }
  30% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1.05); }
}
.fx-count { font-size: 96px; color: #ffe27a; text-shadow: 0 6px 0 rgba(120,60,0,.6), 0 0 30px rgba(255,170,30,.8); }
.fx-count.show { animation: fxCount .6s ease-out forwards; }
@keyframes fxCount {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
}

/* ===== Premium: visual moderno, sem cara de console antigo ===== */
body.ui-premium .screw { display: none; }
body.ui-premium .console {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  max-width: 460px; width: 100%; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  padding: 0 10px 8px; display: flex; flex-direction: column;
}
body.ui-premium .wood-strip {
  background: transparent; box-shadow: none; border-radius: 0; min-height: 0;
  padding: 14px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
body.ui-premium .brand {
  font-style: normal; font-weight: 900; font-size: 26px; letter-spacing: 6px;
  background: linear-gradient(90deg, #5ee7ff 0%, #8d7bff 50%, #ff5fd2 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(120,140,255,.55));
}
body.ui-premium .brand-sub {
  font-size: 10px; letter-spacing: 5px; color: #9fb4ff; background: transparent; border: 0; padding: 0;
}
body.ui-premium .power-led { background: #5ee7ff; box-shadow: 0 0 10px 3px rgba(94,231,255,.7); }
body.ui-premium .console-body { border-radius: 22px; }
body.ui-premium .footer-label {
  color: #7f8fc9; letter-spacing: 3px; font-size: 10px; text-align: center; padding: 10px 0 2px; opacity: .8;
}
body.ui-premium .console-body { border: 0; background: transparent; box-shadow: none; padding: 0; }
body.ui-premium .main-menu { box-shadow: inset 0 0 0 1px rgba(94,231,255,.25), 0 0 30px rgba(94,231,255,.12); }
body.ui-premium .console-body.showcase .screen-frame, body.ui-premium .console-body.showcase .score-panel { visibility: hidden; }
/* troféus: ícone vetorial no lugar de emoji */
body.ui-premium .trophy-icon, body.ui-premium .mini-trophy {
  font-size: 0; display: inline-block; width: 22px; height: 22px; vertical-align: middle;
  background: #46527f; opacity: .55; margin-left: 6px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/></svg>") center/contain no-repeat;
}
body.ui-premium .trophy-icon.won, body.ui-premium .mini-trophy.won { background: linear-gradient(180deg,#ffe27a,#ffae1a); opacity: 1; filter: drop-shadow(0 0 6px rgba(255,190,50,.6)); }

/* ===== Loja ===== */
body.ui-premium .coin-dot { display:inline-block; width:16px; height:16px; border-radius:50%; vertical-align:middle; margin-right:5px;
  background: radial-gradient(circle at 35% 30%, #fff6c4, #ffc61a 55%, #b87400); box-shadow: 0 0 8px rgba(255,198,26,.6); }
body.ui-premium .coin-dot.big { width:26px; height:26px; margin:0 8px 0 0; }
body.ui-premium .shop-balance { display:flex; align-items:center; justify-content:center; gap:4px; padding:10px 16px; margin:0 auto 12px; width:max-content; max-width:100%;
  border-radius:99px; background:linear-gradient(180deg, rgba(255,198,26,.18), rgba(255,198,26,.05)); border:1px solid rgba(255,198,26,.5); }
body.ui-premium .shop-balance b { font-size:24px; color:#ffd45c; }
body.ui-premium .shop-balance small { color:var(--txt-dim); font-size:11px; letter-spacing:1px; margin-left:8px; text-transform:uppercase; }
body.ui-premium .shop-featured { position:relative; margin:0 0 14px; padding:12px; border-radius:20px;
  background: radial-gradient(circle at 20% 0%, rgba(166,107,255,.35), transparent 60%), linear-gradient(135deg,#1b1650,#0c1238); border:1px solid rgba(166,107,255,.6); box-shadow:0 0 24px rgba(140,100,255,.3); }
body.ui-premium .shop-featured-tag { position:absolute; top:-9px; left:16px; z-index:2; font-size:10px; font-weight:900; letter-spacing:2px; padding:3px 10px; border-radius:99px; color:#2b1500;
  background:linear-gradient(180deg,#ffe27a,#ffae1a); }
body.ui-premium .shop-featured .shop-card { background:transparent; border:0; box-shadow:none; flex-direction:row; align-items:center; gap:12px; padding:0; }
body.ui-premium .shop-featured .shop-preview { height:90px; flex:0 0 40%; }
body.ui-premium .shop-featured .shop-card-name { flex:1; text-align:left; font-size:16px; }
body.ui-premium .shop-featured .shop-rarity { display:none; }
body.ui-premium .shop-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:12px 0 14px; }
body.ui-premium .shop-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 8px 10px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid var(--rc, rgba(160,190,255,.25)); transition:transform .15s; }
body.ui-premium .shop-card:active { transform:scale(.97); }
body.ui-premium .shop-card.r-raro { --rc:rgba(79,195,255,.6); }
body.ui-premium .shop-card.r-epico { --rc:rgba(166,107,255,.7); box-shadow:0 0 14px rgba(166,107,255,.25); }
body.ui-premium .shop-card.r-lendario { --rc:rgba(255,198,26,.85); box-shadow:0 0 18px rgba(255,198,26,.35); background:linear-gradient(180deg, rgba(255,198,26,.16), rgba(255,198,26,.03)); }
body.ui-premium .shop-card.equipped { border-color:rgba(93,255,154,.8); box-shadow:0 0 16px rgba(93,255,154,.3); }
body.ui-premium .shop-rarity { position:absolute; top:6px; left:8px; font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--rc, #8da2d8); }
body.ui-premium .shop-card.r-raro .shop-rarity { color:#6fd0ff; } body.ui-premium .shop-card.r-epico .shop-rarity { color:#c3a3ff; } body.ui-premium .shop-card.r-lendario .shop-rarity { color:#ffd45c; }
body.ui-premium .shop-preview { width:100%; height:84px; display:flex; align-items:center; justify-content:center; margin-top:8px; border-radius:12px; background:radial-gradient(circle at 50% 100%, rgba(120,150,255,.18), rgba(0,0,0,.25)); overflow:hidden; }
body.ui-premium .shop-card-name { font-weight:800; font-size:13px; color:#fff; text-align:center; }
body.ui-premium .shop-card .shop-action { width:100%; justify-content:center; }
body.ui-premium .shop-buy { --bt:#ffe27a; --bb:#ffae1a; --be:#a45f00; --fg:#3a2300; font-size:14px; }
body.ui-premium .shop-buy.poor { filter:grayscale(.55) brightness(.85); }
body.ui-premium .shop-card .shop-status { padding:9px 0; font-size:12px; letter-spacing:1px; }
body.ui-premium .sp-ball { width:54px; height:54px; border-radius:50%; background:radial-gradient(circle at 32% 28%, #fff, var(--c) 38%, color-mix(in srgb, var(--c) 45%, #000) 100%);
  box-shadow:0 0 22px color-mix(in srgb, var(--c) 70%, transparent), 0 14px 10px -8px rgba(0,0,0,.8); animation:spFloat 2.4s ease-in-out infinite; }
body.ui-premium .sp-paddle { width:16px; height:64px; border-radius:99px; background:linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #000), var(--c) 45%, #fff 55%, var(--c));
  box-shadow:0 0 16px color-mix(in srgb, var(--c) 60%, transparent); transform:rotate(14deg); animation:spFloat 2.4s ease-in-out infinite; }
body.ui-premium .sp-court { width:100%; height:100%; background:linear-gradient(180deg, rgba(0,0,0,.45), transparent 40%), repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 16px), var(--c); transform:perspective(160px) rotateX(38deg) scale(1.15); transform-origin:50% 100%; }
body.ui-premium .sp-frame { width:70%; height:56px; border-radius:10px; border:3px solid var(--c); box-shadow:0 0 14px var(--c), inset 0 0 12px color-mix(in srgb, var(--c) 50%, transparent); }
body.ui-premium .sp-pattern { width:100%; height:100%; background:#0b1a3a; }
body.ui-premium .sp-grade { background:repeating-linear-gradient(0deg,rgba(94,231,255,.45) 0 1px,transparent 1px 12px), repeating-linear-gradient(90deg,rgba(94,231,255,.45) 0 1px,transparent 1px 12px), #0b1a3a; }
body.ui-premium .sp-pontos { background:radial-gradient(circle, rgba(94,231,255,.7) 1.5px, transparent 2px) 0 0/12px 12px, #0b1a3a; }
body.ui-premium .sp-diagonais { background:repeating-linear-gradient(45deg,rgba(94,231,255,.35) 0 4px,transparent 4px 12px), #0b1a3a; }
body.ui-premium .sp-fx { position:relative; width:60px; height:60px; } body.ui-premium .sp-fx i { position:absolute; width:7px; height:7px; border-radius:50%; background:#ffd45c; box-shadow:0 0 8px #ffd45c; animation:spSpark 1.6s ease-out infinite; opacity:0; left:50%; top:50%; }
body.ui-premium .sp-fx i:nth-child(1){--x:-26px;--y:-22px;animation-delay:0s} body.ui-premium .sp-fx i:nth-child(2){--x:24px;--y:-26px;animation-delay:.3s}
body.ui-premium .sp-fx i:nth-child(3){--x:-20px;--y:22px;animation-delay:.6s} body.ui-premium .sp-fx i:nth-child(4){--x:28px;--y:18px;animation-delay:.9s} body.ui-premium .sp-fx i:nth-child(5){--x:0;--y:-30px;animation-delay:1.2s}
body.ui-premium .sp-fx-minimo i:nth-child(n+3) { display:none; }
body.ui-premium .sp-wave { display:flex; align-items:center; gap:4px; height:50px; } body.ui-premium .sp-wave i { width:6px; border-radius:3px; background:linear-gradient(180deg,#5ee7ff,#8d7bff); animation:spWave 1s ease-in-out infinite; }
body.ui-premium .sp-wave i:nth-child(1){height:20px} body.ui-premium .sp-wave i:nth-child(2){height:38px;animation-delay:.1s} body.ui-premium .sp-wave i:nth-child(3){height:48px;animation-delay:.2s} body.ui-premium .sp-wave i:nth-child(4){height:30px;animation-delay:.3s} body.ui-premium .sp-wave i:nth-child(5){height:42px;animation-delay:.4s} body.ui-premium .sp-wave i:nth-child(6){height:22px;animation-delay:.5s}
@keyframes spFloat { 0%,100%{transform:translateY(0) rotate(var(--r,0deg))} 50%{transform:translateY(-5px) rotate(var(--r,0deg))} }
body.ui-premium .sp-paddle { --r:14deg; }
@keyframes spSpark { 0%{opacity:0;transform:translate(-50%,-50%) scale(.4)} 30%{opacity:1} 100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)} }
@keyframes spWave { 0%,100%{transform:scaleY(.55)} 50%{transform:scaleY(1)} }
@media (prefers-reduced-motion: reduce) { body.ui-premium .shop-preview * { animation:none !important; } }
body.ui-premium .shop-featured .shop-card { flex-wrap: wrap; }
body.ui-premium .shop-featured .shop-preview { flex: 0 0 38%; margin-top: 0; }
body.ui-premium .shop-featured .shop-card-name { flex: 1 1 0; min-width: 0; font-size: 18px; }
body.ui-premium .shop-featured .shop-action, body.ui-premium .shop-featured .shop-status { flex: 1 1 100%; width: 100%; max-width: 100%; margin: 0; }

/* ======================================================================
   LOBBY (2ª tela): layout próprio — cartão do jogador, cartões de modo,
   ações em blocos, controles segmentados e fundo "pôr do sol sintético".
   ====================================================================== */
body.ui-premium.in-lobby {
  background-color: #12071f;
  background-image:
    radial-gradient(900px 520px at 85% -5%, rgba(255,95,160,.38), transparent 60%),
    radial-gradient(800px 600px at -10% 105%, rgba(255,160,40,.30), transparent 62%),
    radial-gradient(700px 500px at 50% 50%, rgba(110,60,220,.22), transparent 70%);
  background-attachment: fixed;
}
body.ui-premium.in-lobby .console-body { }
body.ui-premium .profile-row, body.ui-premium .gameplay-controls {
  position: relative; border-radius: 22px; padding: 14px; margin-top: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%),
    repeating-linear-gradient(60deg, rgba(255,255,255,.035) 0 1px, transparent 1px 22px),
    rgba(20,10,40,.72);
  border: 1px solid rgba(255,130,200,.28);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Cartão do jogador */
body.ui-premium .profile-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.ui-premium .profile-info .profile-name { order: 1; flex: 1 1 auto; min-width: 0; font-size: 18px; color: #fff; text-shadow: none; }
body.ui-premium .profile-info .coin-display { order: 2; padding: 6px 12px; border-radius: 99px; background: rgba(255,198,26,.14); border: 1px solid rgba(255,198,26,.55); }
body.ui-premium .profile-info .trophy-case { order: 5; flex: 1 1 100%; display: flex; gap: 8px; }
body.ui-premium .profile-info .champ-btn { order: 3; --dp: 0px; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; font-size: 0; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); box-shadow: none; color: #fff; position: relative; text-shadow: none; }
body.ui-premium .profile-info .champ-btn::before { content: ''; position: absolute; inset: 9px; background: currentColor;
  -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
body.ui-premium .profile-info .champ-btn:active { transform: scale(.92); }
body.ui-premium #statsBtn { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z'/></svg>"); color: #7ee7ff !important; }
body.ui-premium #achievementsBtn { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3 7 7 .6-5.3 4.6 1.6 7L12 17.800 5.700 21.200l1.600-7L2 9.600 9 9z'/></svg>"); color: #ffd45c !important; }
body.ui-premium #logoutBtn { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 17l5-5-5-5v10zM19 3H5a2 2 0 00-2 2v4h2V5h14v14H5v-4H3v4a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2z'/></svg>"); color: #ff9aa8 !important; }

/* Controles: modos primeiro */
body.ui-premium .gameplay-controls { display: flex; flex-direction: column; gap: 14px; }
body.ui-premium .gameplay-controls > * { margin: 0; }
body.ui-premium .controls-row { order: 1; } body.ui-premium .champ-row { order: 2; } body.ui-premium .champ-panel { order: 2; }
body.ui-premium #targetRow { order: 3; } body.ui-premium #practiceDifficultyRow { order: 4; } body.ui-premium #difficultyRow { order: 5; }
body.ui-premium .instructions { order: 9; font-size: 12px; opacity: .7; }

/* Cartões de modo (2x2) */
body.ui-premium .game-select { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
body.ui-premium .gameplay-controls .dial-btn {
  position: relative; display: flex; align-items: flex-end; justify-content: flex-start; text-align: left;
  min-height: 88px; padding: 12px; border-radius: 18px; overflow: hidden; font-size: 16px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 16px rgba(0,0,0,.4); text-shadow: 0 2px 6px rgba(0,0,0,.6);
  background: var(--art), #1c1236;
}
body.ui-premium .gameplay-controls .dial-btn::after { content: ''; position: absolute; right: -6px; top: -4px; width: 62px; height: 62px; background: rgba(255,255,255,.28);
  -webkit-mask: var(--mi) center/contain no-repeat; mask: var(--mi) center/contain no-repeat; transform: rotate(-12deg); }
body.ui-premium .gameplay-controls .dial-btn .mini-trophy { position: absolute; right: 10px; bottom: 10px; margin: 0; width: 20px; height: 20px; }
body.ui-premium .gameplay-controls .dial-btn.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 22px var(--glow), 0 8px 18px rgba(0,0,0,.5); transform: translateY(-2px); filter: none; }
body.ui-premium .gameplay-controls .dial-btn:not(.active) { filter: saturate(.55) brightness(.8); }
body.ui-premium .gameplay-controls .dial-btn[data-mode="paredao"] { --glow: rgba(255,140,60,.8); --art: linear-gradient(150deg,#ff8a3d,#b83a1a 70%);
  --mi: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 4h9v4H2zM13 4h9v4h-9zM2 10h5v4H2zM9 10h6v4H9zM17 10h5v4h-5zM2 16h9v4H2zM13 16h9v4h-9z'/></svg>"); }
body.ui-premium .gameplay-controls .dial-btn[data-mode="tenis"] { --glow: rgba(170,255,70,.8); --art: linear-gradient(150deg,#9be83a,#1f7a3a 75%);
  --mi: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 2c1.800 0 3.500.6 4.900 1.600C15.700 7.100 15 9.400 15 12s.7 4.900 1.900 6.400A7.950 7.950 0 0112 20c-1.800 0-3.500-.6-4.900-1.600C8.300 16.900 9 14.600 9 12s-.7-4.900-1.900-6.400A7.950 7.950 0 0112 4z'/></svg>"); }
body.ui-premium .gameplay-controls .dial-btn[data-mode="futebol"] { --glow: rgba(60,190,255,.8); --art: linear-gradient(150deg,#2fb4ff,#1448b8 75%);
  --mi: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 6l3.800 2.800-1.400 4.500H9.600l-1.400-4.500z'/></svg>"); }
body.ui-premium .gameplay-controls .dial-btn[data-mode="barreira"] { --glow: rgba(255,210,40,.8); --art: repeating-linear-gradient(45deg,#ffcf1f 0 12px,#2a2a33 12px 24px);
  --mi: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 5h20v5H2zM2 14h20v5H2zM5 10h2v4H5zM17 10h2v4h-2z'/></svg>"); }
body.ui-premium .gameplay-controls .dial-btn[data-mode="barreira"] { text-shadow: 0 0 6px #000, 0 2px 4px #000; }

/* Ações em blocos */
body.ui-premium .champ-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
body.ui-premium .gameplay-controls .champ-row .champ-btn {
  --dp: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 74px; padding: 10px 4px; width: 100%;
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; text-align: center; white-space: normal; line-height: 1.15;
  border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 22%, transparent), rgba(255,255,255,.03));
  border: 1px solid color-mix(in srgb, var(--ac) 70%, transparent); color: #fff; box-shadow: inset 0 -3px 0 var(--ac); text-shadow: none;
}
body.ui-premium .gameplay-controls .champ-row .champ-btn::before { content: ''; width: 24px; height: 24px; background: var(--ac); -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
body.ui-premium .gameplay-controls .champ-row .champ-btn:active { transform: scale(.95); }
body.ui-premium #practiceBtn { --ac: #5ee7ff; --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2v11h3v9l7-12h-4l4-8z'/></svg>"); }
body.ui-premium #champBtn { --ac: #ffc61a; --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 5h-2V3H7v2H5c-1.100 0-2 .9-2 2v1c0 2.550 1.920 4.630 4.390 4.940.63 1.500 1.980 2.630 3.610 2.960V19H7v2h10v-2h-4v-3.100c1.630-.33 2.980-1.460 3.610-2.960C19.080 12.630 21 10.550 21 8V7c0-1.100-.9-2-2-2zM5 8V7h2v3.820C5.840 10.400 5 9.300 5 8zm14 0c0 1.300-.84 2.400-2 2.820V7h2v1z'/></svg>"); }
body.ui-premium #specialModesBtn { --ac: #c08bff; --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 6H3c-1.100 0-2 .9-2 2v8c0 1.100.9 2 2 2h18c1.100 0 2-.9 2-2V8c0-1.100-.9-2-2-2zm-10 7H8v3H6v-3H3v-2h3V8h2v3h3v2zm4.500 2c-.8 0-1.500-.7-1.500-1.500s.7-1.500 1.500-1.500 1.500.7 1.500 1.500-.7 1.500-1.500 1.500zm4-3c-.8 0-1.500-.7-1.500-1.500S18.700 9 19.500 9s1.500.7 1.500 1.500-.7 1.500-1.500 1.500z'/></svg>"); }

/* Controles segmentados */
body.ui-premium .gameplay-controls .target-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 0; margin: 0; }
body.ui-premium .gameplay-controls .target-label { flex: 1 1 100%; margin: 0 0 6px 2px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #ffb3d9; font-weight: 800; }
body.ui-premium .gameplay-controls .target-btn { flex: 1 1 0; margin: 0; border-radius: 0; padding: 11px 4px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-left-width: 0; box-shadow: none; font-size: 13px; text-align: center; filter: none; }
body.ui-premium .gameplay-controls .target-btn:first-of-type { border-left-width: 1px; border-radius: 12px 0 0 12px; }
body.ui-premium .gameplay-controls .target-btn:last-of-type { border-radius: 0 12px 12px 0; }
body.ui-premium .gameplay-controls .target-btn.active { background: linear-gradient(180deg,#ff7ab8,#e0357f); border-color: #ff9fcb; color: #fff; box-shadow: 0 0 14px rgba(255,90,160,.55); text-shadow: 0 1px 2px rgba(0,0,0,.4); position: relative; z-index: 1; }
body.ui-premium .gameplay-controls { display: flex !important; }
body.ui-premium .profile-info .profile-name { flex: 1 1 calc(100% - 165px); }
body.ui-premium .profile-info .trophy-case { flex: 1 1 0; order: 5; }
body.ui-premium .profile-info .coin-display { order: 6; }
body.ui-premium .gameplay-controls .target-btn { align-self: stretch; }
body.ui-premium .wood-strip { padding-top: calc(30px + env(safe-area-inset-top, 0px)); overflow: visible; }
body.ui-premium .brand-row { overflow: visible; padding-top: 4px; }
body.ui-premium .brand { line-height: 1.35; padding: 6px 4px 4px; overflow: visible; }

/* ===== Título sem recorte (sem background-clip:text) ===== */
body.ui-premium .brand {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: #eaf2ff; color: #eaf2ff; filter: none;
  text-shadow: 0 0 10px rgba(94,231,255,.9), 0 0 26px rgba(141,123,255,.8), 0 3px 0 rgba(10,12,50,.7);
  line-height: 1.4; padding: 8px 4px 6px; white-space: nowrap;
}
body.ui-premium .brand-row { padding-top: 10px; }


/* =====================================================================
   LOBBY FUTURISTA (menu principal) — padrão aprovado
   ===================================================================== */
@font-face { font-family:'Space Grotesk'; font-weight:500; font-display:swap; src:url(fonts/space-grotesk-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:700; font-display:swap; src:url(fonts/space-grotesk-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:400; font-display:swap; src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:700; font-display:swap; src:url(fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2'); }
:root { --lb-sg: 'Space Grotesk', 'Segoe UI', Roboto, system-ui, sans-serif; --lb-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; }

body.ui-premium .main-menu {
  position: fixed; inset: 0; z-index: 40; display: block; padding: 0; border-radius: 0; box-shadow: none;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(700px 500px at 50% -120px, rgba(0,245,255,.20), transparent 70%),
    radial-gradient(400px 400px at 105% 40%, rgba(255,0,170,.13), transparent 70%),
    radial-gradient(500px 500px at -10% 100%, rgba(0,255,136,.10), transparent 70%),
    #0A0A14;
  font-family: var(--lb-sg); color: #fff; transition: opacity .35s ease, visibility 0s;
}
body.ui-premium .main-menu::after { content:''; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px); }
body.ui-premium .main-menu.hidden { opacity: 0; visibility: hidden; transform: none; transition: opacity .35s ease, visibility 0s .35s; }
body.ui-premium .lb-wrap { position: relative; max-width: 440px; margin: 0 auto; padding: env(safe-area-inset-top, 0px) 16px 32px; min-height: 100%; display: flex; flex-direction: column; }

/* cabeçalho */
body.ui-premium .lb-header { position: sticky; top: 0; z-index: 8; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin: 0 -16px; padding: 16px 16px 12px; background: rgba(10,10,20,.82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.06); }
body.ui-premium .lb-brand-row { display: flex; align-items: center; gap: 8px; }
body.ui-premium .lb-tg { width: 28px; height: 28px; border-radius: 8px; background: #fff; color: #000; display: grid; place-items: center; font: 900 14px var(--lb-mono); flex: 0 0 auto; }
body.ui-premium .lb-title { margin: 0; font: 700 11px/1.35 var(--lb-mono); letter-spacing: .22em; color: #fff; text-transform: uppercase; }
body.ui-premium .lb-title b { color: #fff; text-shadow: 0 0 8px rgba(0,245,255,.8); font-weight: 700; }
body.ui-premium .lb-title em { color: #00f5ff; font-style: normal; display: block; }
body.ui-premium .lb-title s { color: rgba(255,255,255,.4); text-decoration: none; }
body.ui-premium .lb-tag { margin-top: 8px; display: flex; align-items: center; gap: 8px; font: 400 9px var(--lb-mono); letter-spacing: .2em; color: rgba(255,255,255,.3); }
body.ui-premium .lb-tag-line { width: 44px; height: 2px; background: linear-gradient(90deg, #00f5ff, transparent); }
body.ui-premium .lb-header .menu-profile-info { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 0; background: none; border: 0; box-shadow: none; }
body.ui-premium .lb-chip { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
body.ui-premium .lb-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #22d3ee, #d946ef); color: #000; display: grid; place-items: center; font: 700 11px var(--lb-sg); }
body.ui-premium .lb-chip .profile-name { font: 600 12px var(--lb-sg); color: #fff; letter-spacing: .02em; text-shadow: none; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-premium .lb-lv { font: 400 10px var(--lb-mono); font-style: normal; background: rgba(255,255,255,.12); padding: 2px 6px; border-radius: 5px; margin-left: 4px; }
body.ui-premium .lb-header .trophy-case { display: flex; gap: 4px; margin: 0; padding: 0; }
body.ui-premium .lb-header .trophy-icon { position: relative; width: 20px; height: 20px; margin: 0; border-radius: 50%; font-size: 0; opacity: 1; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
  -webkit-mask: none; mask: none; filter: none; box-shadow: none; }
body.ui-premium .lb-header .trophy-icon::before { content: ''; position: absolute; inset: 4px; background: rgba(255,255,255,.35);
  -webkit-mask: var(--lb-trophy) center/contain no-repeat; mask: var(--lb-trophy) center/contain no-repeat; }
body.ui-premium .lb-header .trophy-icon.won { background: linear-gradient(135deg, #fde047, #f59e0b); border-color: rgba(0,0,0,.2); box-shadow: 0 0 8px rgba(255,204,51,.55); }
body.ui-premium .lb-header .trophy-icon.won::before { background: rgba(0,0,0,.8); }
:root { --lb-trophy: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 5h-2V3H7v2H5c-1.100 0-2 .9-2 2v1c0 2.550 1.920 4.630 4.390 4.940.63 1.500 1.980 2.630 3.610 2.960V19H7v2h10v-2h-4v-3.100c1.630-.33 2.980-1.460 3.610-2.960C19.080 12.630 21 10.550 21 8V7c0-1.100-.9-2-2-2zM5 8V7h2v3.820C5.840 10.400 5 9.300 5 8zm14 0c0 1.300-.84 2.400-2 2.820V7h2v1z'/></svg>"); }

/* login e dica */
body.ui-premium .main-menu .menu-profile-login { margin: 28px 0 0; width: 100%; max-width: none; padding: 16px; display: flex; gap: 10px; border-radius: 24px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
body.ui-premium .main-menu .menu-login-hint { margin: 12px 4px 0; font: 400 11px var(--lb-mono); letter-spacing: .1em; color: rgba(255,255,255,.5); text-align: center; text-transform: uppercase; }

/* seções */
body.ui-premium .main-menu .main-menu-buttons { display: flex; flex-direction: column; gap: 28px; width: 100%; max-width: none; margin-top: 20px; }
body.ui-premium .lb-sec { display: flex; flex-direction: column; gap: 12px; }
body.ui-premium .lb-sec-h { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
body.ui-premium .lb-secico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: 0 0 auto; font-style: normal; }
body.ui-premium .lb-secico .lb-svg { width: 16px; height: 16px; }
body.ui-premium .lb-secico.s-orange { background: linear-gradient(135deg,#f97316,#ef4444); }
body.ui-premium .lb-secico.s-blue { background: linear-gradient(135deg,#38bdf8,#2563eb); }
body.ui-premium .lb-secico.s-gray { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
body.ui-premium .lb-sec-h h2 { margin: 0; font: 700 13px var(--lb-mono); letter-spacing: .18em; color: rgba(255,255,255,.9); text-shadow: none; }
body.ui-premium .lb-sec-line { flex: 1; height: 1px; margin-left: 6px; background: linear-gradient(90deg, rgba(249,115,22,.4), transparent); }
body.ui-premium .lb-sec-line.s-blue { background: linear-gradient(90deg, rgba(56,189,248,.4), transparent); }
body.ui-premium .lb-sec-line.s-gray { background: linear-gradient(90deg, rgba(255,255,255,.25), transparent); }
body.ui-premium .lb-svg { width: 20px; height: 20px; display: block; }

/* botões do lobby: zera o estilo antigo */
body.ui-premium .main-menu .lb-btn {
  all: unset; box-sizing: border-box; display: block; position: relative; cursor: pointer; color: #fff; font-family: var(--lb-sg); -webkit-tap-highlight-color: transparent; text-align: left;
}
body.ui-premium .main-menu .lb-btn::before { display: none; content: none; }
body.ui-premium .main-menu .lb-btn:focus-visible { outline: 2px solid #00ff88; outline-offset: 2px; }
body.ui-premium .main-menu .lb-btn { transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
body.ui-premium .main-menu .lb-btn:active { transform: scale(.975); }
body.ui-premium .lb-name { font-weight: 700; text-transform: uppercase; }
body.ui-premium .lb-sub { font: 400 12px var(--lb-mono); color: rgba(255,255,255,.6); letter-spacing: .02em; }

/* hero */
body.ui-premium .main-menu .lb-hero { width: 100%; height: 168px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(0,255,136,.6);
  box-shadow: 0 0 32px rgba(0,255,136,.32), inset 0 0 20px rgba(0,255,136,.08); }
body.ui-premium .lb-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.ui-premium .lb-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #0A0A14 0%, rgba(10,10,20,.6) 45%, transparent 100%), linear-gradient(0deg, rgba(0,0,0,.8), transparent 55%), linear-gradient(135deg, rgba(0,255,136,.18), transparent 60%, rgba(34,211,238,.18)); }
body.ui-premium .lb-hero-in { position: relative; z-index: 2; height: 100%; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; }
body.ui-premium .lb-play { width: 40px; height: 40px; border-radius: 14px; background: #00ff88; color: #000; display: grid; place-items: center; box-shadow: 0 0 18px rgba(0,255,136,.6); }
body.ui-premium .lb-play .lb-svg { width: 20px; height: 20px; margin-left: 2px; }
body.ui-premium .lb-hero .lb-name { display: block; font-size: 27px; font-weight: 900; line-height: 1; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
body.ui-premium .lb-hero .lb-sub { display: block; margin-top: 6px; }

/* campeonato */
body.ui-premium .main-menu .lb-champ { width: 100%; height: 118px; border-radius: 24px; overflow: hidden; background: rgba(18,18,31,.65); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body.ui-premium .lb-champ::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, #fcd34d, #fef08a, transparent); opacity: .6; }
body.ui-premium .lb-champ-art { position: absolute; top: 0; right: 0; bottom: 0; width: 48%; overflow: hidden; }
body.ui-premium .lb-champ-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
body.ui-premium .lb-champ-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, transparent, rgba(18,18,31,.4) 50%, #12121f); }
body.ui-premium .lb-champ-in { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; gap: 16px; padding: 16px; box-sizing: border-box; }
body.ui-premium .lb-trophy { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #fcd34d, #ca8a04); display: grid; place-items: center; color: #111; box-shadow: 0 0 18px rgba(255,204,51,.5); flex: 0 0 auto; }
body.ui-premium .lb-trophy .lb-svg { width: 28px; height: 28px; }
body.ui-premium .lb-champ-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.ui-premium .lb-champ .lb-name { font-size: 20px; font-weight: 800; }
body.ui-premium .lb-champ .lb-sub { font-size: 11px; color: #fcd34d; }
body.ui-premium .lb-prog { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
body.ui-premium .lb-prog .lb-bar { width: 84px; }
body.ui-premium .lb-prog em { font: 400 11px var(--lb-mono); font-style: normal; color: rgba(255,255,255,.6); }
body.ui-premium .lb-bar { display: block; height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
body.ui-premium .lb-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #facc15, #f59e0b); transition: width .6s ease; }

/* legado (3 cartões) */
body.ui-premium .lb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
body.ui-premium .main-menu .lb-card { min-height: 160px; padding: 14px 12px; border-radius: 22px; border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; justify-content: space-between; gap: 10px; overflow: hidden; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body.ui-premium .lb-card.c-cyan { background: linear-gradient(160deg, rgba(34,211,238,.20), rgba(255,255,255,.03)); }
body.ui-premium .lb-card.c-pink { background: linear-gradient(160deg, rgba(217,70,239,.22), rgba(255,255,255,.03)); }
body.ui-premium .lb-card.c-violet { background: linear-gradient(160deg, rgba(139,92,246,.24), rgba(255,255,255,.03)); }
body.ui-premium .lb-ci { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
body.ui-premium .lb-card.c-cyan .lb-ci { color: #67e8f9; } body.ui-premium .lb-card.c-pink .lb-ci { color: #f0abfc; } body.ui-premium .lb-card.c-violet .lb-ci { color: #c4b5fd; }
body.ui-premium .lb-card .lb-name { font: 700 10px var(--lb-mono); letter-spacing: .14em; }
body.ui-premium .lb-info { display: flex; flex-direction: column; gap: 4px; }
body.ui-premium .lb-info strong { font: 800 22px var(--lb-sg); line-height: 1; }
body.ui-premium .lb-info small { font: 400 10px/1.3 var(--lb-mono); color: rgba(255,255,255,.55); }
body.ui-premium .lb-card.c-pink .lb-bar i { background: linear-gradient(90deg, #f0abfc, #ec4899); }

/* lista loja & sistema */
body.ui-premium .lb-list { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: rgba(18,18,31,.7); }
body.ui-premium .lb-list::before { content: ''; position: absolute; inset: 0; background: url(img/lobby-store.webp) center/cover; opacity: .16; filter: saturate(.7); }
body.ui-premium .main-menu .lb-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.06); position: relative; }
body.ui-premium .main-menu .lb-row:last-child { border-bottom: 0; }
body.ui-premium .lb-ri { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; flex: 0 0 auto; color: rgba(255,255,255,.88); }
body.ui-premium .lb-rt { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
body.ui-premium .lb-row .lb-name { font: 700 13px var(--lb-mono); letter-spacing: .12em; }
body.ui-premium .lb-row .lb-sub { flex: 1 1 100%; font-size: 11px; color: rgba(255,255,255,.5); }
body.ui-premium .lb-new { font: 700 9px var(--lb-mono); font-style: normal; letter-spacing: .1em; padding: 2px 7px; border-radius: 5px; background: #22d3ee; color: #031418; }
body.ui-premium .lb-go { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); display: grid; place-items: center; color: rgba(255,255,255,.55); flex: 0 0 auto; }
body.ui-premium .lb-go .lb-svg { width: 14px; height: 14px; }

/* rodapé */
body.ui-premium .lb-foot { margin-top: auto; padding-top: 28px; display: flex; align-items: center; justify-content: center; gap: 10px; font: 400 10px var(--lb-mono); letter-spacing: .14em; color: rgba(255,255,255,.35); text-transform: uppercase; }
body.ui-premium .lb-dot { width: 6px; height: 6px; border-radius: 50%; background: #00ff88; box-shadow: 0 0 8px #00ff88; }

/* telas do jogo escondem o cabeçalho antigo só quando o lobby está ativo */
body.ui-premium:not(.in-lobby) .wood-strip, body.ui-premium:not(.in-lobby) .footer-label { visibility: hidden; }
body.ui-premium .main-menu .main-menu-buttons:not([style*="none"]) { display: flex !important; flex-direction: column; grid-template-columns: none; }
body.ui-premium .main-menu .lb-sec { width: 100%; min-width: 0; }

body.ui-premium .main-menu .lb-btn:hover { background: inherit; transform: none; filter: none; }
body.ui-premium .main-menu .lb-btn:active { transform: scale(.975); }

/* =====================================================================
   TELAS INTERNAS (overlay) no padrão lobby
   ===================================================================== */
body.ui-premium .overlay {
  position: fixed; inset: 0; z-index: 45; display: none; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; border-radius: 0;
  background:
    radial-gradient(700px 500px at 50% -120px, rgba(0,245,255,.20), transparent 70%),
    radial-gradient(400px 400px at 105% 40%, rgba(255,0,170,.13), transparent 70%),
    radial-gradient(500px 500px at -10% 100%, rgba(0,255,136,.10), transparent 70%), #0A0A14;
  font-family: var(--lb-sg); color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.ui-premium .overlay::after { content:''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px); }
body.ui-premium .overlay .fireworks-canvas { display: none; }
body.ui-premium .overlay .overlay-box {
  position: relative; z-index: 2; width: 100%; max-width: 440px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 40px;
  background: none; border: 0; box-shadow: none; border-radius: 0; text-align: left; max-height: none; overflow: visible; display: block;
}
body.ui-premium .overlay .overlay-trophy { display: none !important; }
body.ui-premium .overlay .overlay-title {
  font: 700 15px var(--lb-mono); letter-spacing: .2em; text-transform: uppercase; color: #fff; text-align: left; margin: 0; padding: 6px 0 2px; font-style: normal;
  text-shadow: 0 0 10px rgba(0,245,255,.7), 0 0 26px rgba(141,123,255,.55); background: none; -webkit-text-fill-color: #fff; filter: none; line-height: 1.4;
}
body.ui-premium .overlay .overlay-title::after { content: 'VINTAGE · 1977'; display: block; margin-top: 4px; font: 400 8px var(--lb-mono); letter-spacing: .2em; color: rgba(255,255,255,.4); text-shadow: none; }
body.ui-premium .lx-chip { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 18px); right: 140px; display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
body.ui-premium .lx-chip .lb-avatar { width: 22px; height: 22px; font-size: 10px; }
body.ui-premium .lx-chip .lx-cn { font: 600 11px var(--lb-sg); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body.ui-premium .overlay .overlay-msg { margin-top: 10px; color: #fff; font-family: var(--lb-sg); text-align: left; max-height: none; overflow: visible; }
body.ui-premium .overlay .overlay-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; align-items: stretch; }
body.ui-premium .overlay .overlay-btn {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; width: 100%; border-radius: 20px; text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; font: 700 13px var(--lb-sg); letter-spacing: .15em; text-transform: uppercase; -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: transform .15s;
}
body.ui-premium .overlay .overlay-btn:active { transform: scale(.97); }
body.ui-premium .overlay .overlay-btn.secondary { height: 44px; font: 700 11px var(--lb-mono); color: rgba(255,255,255,.7); letter-spacing: .12em; border-radius: 16px; }
body.ui-premium .overlay .overlay-btn .lb-svg { width: 16px; height: 16px; }
body.ui-premium .overlay .overlay-btn:focus-visible { outline: 2px solid #00f5ff; outline-offset: 2px; }

/* componentes lx */
body.ui-premium .lx-sec { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
body.ui-premium .lx-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(0,245,255,.4); color: #00f5ff; flex: 0 0 auto; font-style: normal; }
body.ui-premium .lx-ic .lb-svg { width: 14px; height: 14px; }
body.ui-premium .lx-sec h3 { margin: 0; font: 400 11px var(--lb-mono); letter-spacing: .18em; color: #fff; text-transform: uppercase; }
body.ui-premium .lx-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0,245,255,.55), rgba(255,0,255,.55)); opacity: .6; }
body.ui-premium .lx-card { background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 12px 14px; min-width: 0; }
body.ui-premium .lx-grid3, body.ui-premium .lx-grid2 { display: grid; gap: 10px; margin-bottom: 10px; }
body.ui-premium .lx-grid3 { grid-template-columns: repeat(3, 1fr); } body.ui-premium .lx-grid2 { grid-template-columns: repeat(2, 1fr); }
body.ui-premium .lx-card h4 { margin: 0; font: 400 8px var(--lb-mono); letter-spacing: .15em; color: rgba(255,255,255,.5); }
body.ui-premium .lx-card b { display: block; margin-top: 4px; font: 700 18px var(--lb-sg); color: #fff; word-break: break-word; }
body.ui-premium .lx-card p { margin: 4px 0 0; font: 400 8px var(--lb-mono); color: rgba(255,255,255,.45); }
body.ui-premium .lx-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); margin-top: 8px; overflow: hidden; }
body.ui-premium .lx-bar i { display: block; height: 100%; border-radius: 4px; background: #00ff88; }
body.ui-premium .lx-bar.big { height: 8px; } body.ui-premium .lx-bar.big i { background: linear-gradient(90deg,#00ff88,#00f5ff); box-shadow: 0 0 12px rgba(0,255,136,.5); }
body.ui-premium .lx-level { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px; border-radius: 20px; background: linear-gradient(135deg, rgba(0,245,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(0,245,255,.25); }
body.ui-premium .lx-level b { font: 800 30px var(--lb-sg); color: #00f5ff; display: block; line-height: 1; } body.ui-premium .lx-level span { font: 400 8px var(--lb-mono); letter-spacing: .15em; color: rgba(255,255,255,.5); }
body.ui-premium .lx-level-r { flex: 1; } body.ui-premium .lx-level-r small { font: 400 10px var(--lb-mono); color: rgba(255,255,255,.6); }
body.ui-premium .lx-list { padding: 4px 14px; }
body.ui-premium .lx-row, body.ui-premium .lx-set { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; }
body.ui-premium .lx-row + .lx-row, body.ui-premium .lx-set + .lx-set { border-top: 1px solid rgba(255,255,255,.06); }
body.ui-premium .lx-rn { font: 500 12px var(--lb-sg); letter-spacing: .06em; color: #fff; text-transform: uppercase; }
body.ui-premium .lx-rs { font: 400 8px var(--lb-mono); color: rgba(255,255,255,.4); letter-spacing: .08em; margin-top: 2px; }
body.ui-premium .lx-rr { text-align: right; } body.ui-premium .lx-rr span { font: 700 11px var(--lb-mono); display: block; }
body.ui-premium .lx-ok { width: 24px; height: 24px; border-radius: 50%; background: rgba(0,255,136,.15); color: #00ff88; display: grid !important; place-items: center; margin-left: auto; } body.ui-premium .lx-ok .lb-svg { width: 14px; height: 14px; }
body.ui-premium .lx-filters { display: flex; gap: 8px; overflow-x: auto; margin: 14px 0 12px; padding-bottom: 4px; scrollbar-width: none; } body.ui-premium .lx-filters::-webkit-scrollbar { display: none; }
body.ui-premium .lx-filters button { all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap; padding: 8px 14px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font: 400 10px var(--lb-mono); letter-spacing: .12em; color: rgba(255,255,255,.5); }
body.ui-premium .lx-filters button.active { background: rgba(0,245,255,.12); border-color: #00f5ff; color: #00f5ff; box-shadow: 0 0 12px rgba(0,245,255,.2); }
/* conquistas */
body.ui-premium .lx-prog { padding: 16px; } body.ui-premium .lx-prog-top { display: flex; justify-content: space-between; align-items: flex-end; }
body.ui-premium .lx-prog-top b { font-size: 24px; margin: 0; } body.ui-premium .lx-prog-top b small { font-size: 14px; color: rgba(255,255,255,.4); } body.ui-premium .lx-prog-top span { display: block; font: 400 9px var(--lb-mono); color: rgba(255,255,255,.5); letter-spacing: .12em; margin-top: 2px; }
body.ui-premium .lx-pct { font: 700 20px var(--lb-sg); color: #00ff88; text-align: right; } body.ui-premium .lx-pct small { display: block; font: 400 8px var(--lb-mono); color: rgba(255,255,255,.4); }
body.ui-premium .lx-prog .lx-bar { margin-top: 12px; }
body.ui-premium .lx-achlist { display: flex; flex-direction: column; gap: 10px; }
body.ui-premium .lx-ach { position: relative; display: flex; gap: 12px; padding: 14px; padding-right: 96px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
body.ui-premium .lx-ach.unlocked { border-color: rgba(0,255,136,.28); background: rgba(0,255,136,.05); } body.ui-premium .lx-ach.locked { opacity: .72; }
body.ui-premium .lx-aicon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.35); }
body.ui-premium .lx-ach.unlocked .lx-aicon { background: linear-gradient(135deg, rgba(0,255,136,.2), rgba(0,245,255,.2)); border-color: rgba(0,255,136,.3); color: #00ff88; }
body.ui-premium .lx-an { display: flex; align-items: center; gap: 6px; font: 700 12px var(--lb-sg); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
body.ui-premium .lx-achk { color: #00ff88; display: inline-grid; } body.ui-premium .lx-achk .lb-svg { width: 12px; height: 12px; }
body.ui-premium .lx-ad { margin-top: 3px; font: 400 10px/1.4 var(--lb-mono); color: rgba(255,255,255,.55); }
body.ui-premium .lx-reward { display: flex; align-items: center; gap: 4px; margin-top: 6px; font: 700 10px var(--lb-mono); color: #ffcc33; } body.ui-premium .lx-reward .lb-svg { width: 12px; height: 12px; }
body.ui-premium .lx-badge { position: absolute; top: 12px; right: 12px; font: 700 8px var(--lb-mono); letter-spacing: .08em; padding: 3px 8px; border-radius: 12px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.45); }
body.ui-premium .lx-badge.on { background: #00ff88; color: #0A0A14; }
/* ranking */
body.ui-premium .lx-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 14px 0 6px; }
body.ui-premium .lx-pcard { position: relative; flex: 0 0 auto; width: 104px; padding: 12px 6px 0; text-align: center; overflow: hidden; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
body.ui-premium .lx-pcard.first { width: 116px; background: linear-gradient(180deg, rgba(255,204,51,.16), rgba(255,255,255,.06)); border-color: rgba(255,204,51,.4); box-shadow: 0 0 20px rgba(255,204,51,.2); padding-top: 18px; }
body.ui-premium .lx-crown { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background: #ffcc33; color: #000; display: grid; place-items: center; } body.ui-premium .lx-crown .lb-svg { width: 12px; height: 12px; }
body.ui-premium .lx-ppos { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; font: 400 9px var(--lb-mono); } body.ui-premium .lx-ppos.first { background: #ffcc33; color: #000; }
body.ui-premium .lx-pav { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 6px; display: grid; place-items: center; font: 700 14px var(--lb-sg); color: #0A0A14; }
body.ui-premium .lx-pav.gold { background: linear-gradient(135deg,#ffcc33,#ffaa00); } body.ui-premium .lx-pav.silver { background: linear-gradient(135deg,#c0c0c0,#e8e8e8); } body.ui-premium .lx-pav.bronze { background: linear-gradient(135deg,#cd7f32,#a0522d); color: #fff; }
body.ui-premium .lx-pname { font: 500 11px var(--lb-sg); letter-spacing: .05em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-premium .lx-ppts { font: 700 10px var(--lb-mono); color: #00ff88; margin-top: 2px; } body.ui-premium .lx-pmode { font: 400 8px var(--lb-mono); color: rgba(255,255,255,.4); margin-top: 2px; }
body.ui-premium .lx-pbase { margin: 10px -6px 0; padding: 7px 0; background: rgba(255,255,255,.06); font: 400 8px var(--lb-mono); color: rgba(255,255,255,.35); } body.ui-premium .lx-pcard.first .lx-pbase { background: rgba(255,204,51,.15); color: #ffcc33; }
body.ui-premium .lx-ranklist { display: flex; flex-direction: column; gap: 8px; }
body.ui-premium .lx-rank { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
body.ui-premium .lx-rank.me { border-color: rgba(0,255,136,.5); background: rgba(0,255,136,.08); box-shadow: 0 0 16px rgba(0,255,136,.12); } body.ui-premium .lx-rank.solo { margin-top: 12px; }
body.ui-premium .lx-pos { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; font: 400 10px var(--lb-mono); color: rgba(255,255,255,.6); flex: 0 0 auto; }
body.ui-premium .lx-pos.top { background: rgba(255,204,51,.15); color: #ffcc33; border: 1px solid rgba(255,204,51,.3); } body.ui-premium .lx-pos.me { background: #00ff88; color: #0A0A14; }
body.ui-premium .lx-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, rgba(0,245,255,.27), rgba(255,0,255,.27)); display: grid; place-items: center; font: 700 10px var(--lb-sg); flex: 0 0 auto; } body.ui-premium .lx-av.me { background: linear-gradient(135deg,#00ff88,#00f5ff); color: #0A0A14; } body.ui-premium .lx-av.big { width: 48px; height: 48px; font-size: 16px; background: linear-gradient(135deg,#00f5ff,#00ff88); color: #0A0A14; }
body.ui-premium .lx-rinfo { flex: 1; min-width: 0; } body.ui-premium .lx-rname { font: 500 11px var(--lb-sg); letter-spacing: .05em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.ui-premium .lx-rmode { font: 400 8px var(--lb-mono); color: rgba(255,255,255,.4); margin-top: 1px; }
body.ui-premium .lx-rpts { font: 600 11px var(--lb-mono); text-align: right; } body.ui-premium .lx-rpts small { display: block; font-size: 8px; color: rgba(255,255,255,.4); font-weight: 400; }
body.ui-premium .lx-you { margin-left: 6px; padding: 2px 6px; border-radius: 10px; background: #00ff88; color: #0A0A14; font: 700 7px var(--lb-mono); }
body.ui-premium .lx-empty { padding: 28px 16px; text-align: center; font: 400 11px/1.6 var(--lb-mono); color: rgba(255,255,255,.55); background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.14); border-radius: 20px; }
body.ui-premium .lx-note { margin-top: 12px; text-align: center; font: 400 8px var(--lb-mono); letter-spacing: .12em; color: rgba(255,255,255,.3); }
/* configurações */
body.ui-premium .lx-switch { all: unset; box-sizing: border-box; position: relative; width: 44px; height: 26px; border-radius: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.08); cursor: pointer; transition: .2s; flex: 0 0 auto; }
body.ui-premium .lx-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s; }
body.ui-premium .lx-switch.on { background: #00ff88; box-shadow: 0 0 12px rgba(0,255,136,.35); } body.ui-premium .lx-switch.on::after { left: 20px; }
body.ui-premium .lx-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.08); }
body.ui-premium .lx-seg button { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 12px; border-radius: 12px; font: 400 9px var(--lb-mono); letter-spacing: .1em; color: rgba(255,255,255,.5); }
body.ui-premium .lx-seg button.active { background: #00f5ff; color: #0A0A14; font-weight: 700; box-shadow: 0 0 10px rgba(0,245,255,.3); } body.ui-premium .lx-seg.tema button.active { background: #ffcc33; } body.ui-premium .lx-seg.idioma button.active { background: #a855f7; color: #fff; }
body.ui-premium .lx-hint { margin: 10px 0 0; font: 400 8px/1.5 var(--lb-mono); color: rgba(255,255,255,.35); }
body.ui-premium .lx-account { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } body.ui-premium .lx-acc-i { flex: 1; min-width: 150px; } body.ui-premium .lx-acc-i b { font-size: 12px; margin: 0; letter-spacing: .06em; }
body.ui-premium .lx-acc-i small { display: block; margin-top: 2px; font: 400 9px/1.4 var(--lb-mono); color: rgba(255,255,255,.5); } body.ui-premium .lx-acc-i em { display: block; margin-top: 4px; font: 400 8px var(--lb-mono); font-style: normal; color: #00ff88; }
body.ui-premium .lx-mini { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 14px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font: 400 9px var(--lb-mono); letter-spacing: .12em; color: #fff; }
/* ajuda e créditos usam as classes antigas: estilo limpo */
body.ui-premium .overlay .help-section, body.ui-premium .overlay .credits-body { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 14px 16px; margin-bottom: 10px; font: 400 12px/1.6 var(--lb-sg); color: rgba(255,255,255,.8); }
body.ui-premium .overlay .help-title { font: 700 11px var(--lb-mono); letter-spacing: .16em; text-transform: uppercase; color: #00f5ff; margin-bottom: 6px; }
body.ui-premium .overlay .help-section b { color: #fff; }

/* fim de partida */
body.ui-premium .overlay.res-win { background: radial-gradient(360px 360px at -10% -5%, rgba(0,255,136,.45), transparent 70%), radial-gradient(300px 300px at 110% 0, rgba(0,245,255,.35), transparent 70%), radial-gradient(400px 400px at 20% 100%, rgba(255,204,51,.30), transparent 70%), #0A0A14; }
body.ui-premium .overlay.res-lose { background: radial-gradient(420px 300px at 50% -5%, rgba(255,80,80,.18), transparent 70%), radial-gradient(300px 300px at 20% 95%, rgba(100,100,150,.18), transparent 70%), #0A0A14; }
body.ui-premium .overlay.res-win .overlay-box, body.ui-premium .overlay.res-lose .overlay-box { text-align: center; padding-top: calc(env(safe-area-inset-top, 0px) + 28px); }
body.ui-premium .overlay.res-win .lx-chip, body.ui-premium .overlay.res-lose .lx-chip { display: none !important; }
body.ui-premium .overlay.res-win .overlay-title, body.ui-premium .overlay.res-lose .overlay-title { text-align: center; font: 700 34px var(--lb-sg); letter-spacing: .1em; margin: 14px 0 6px; line-height: 1.15; }
body.ui-premium .overlay.res-win .overlay-title { text-shadow: 0 0 30px rgba(0,255,136,.6), 0 0 60px rgba(0,255,136,.3); }
body.ui-premium .overlay.res-lose .overlay-title { color: rgba(255,255,255,.85); text-shadow: none; }
body.ui-premium .overlay.res-win .overlay-title::after, body.ui-premium .overlay.res-lose .overlay-title::after { content: ''; display: block; width: 120px; height: 3px; margin: 12px auto 0; border-radius: 3px; background: linear-gradient(90deg,#00ff88,#00f5ff); box-shadow: 0 0 12px #00ff88; font-size: 0; }
body.ui-premium .overlay.res-lose .overlay-title::after { background: rgba(255,255,255,.18); box-shadow: none; }
body.ui-premium .lx-res-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font: 400 10px var(--lb-mono); letter-spacing: .15em; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.55); }
body.ui-premium .overlay.res-win .lx-res-badge { background: rgba(0,255,136,.12); border-color: rgba(0,255,136,.4); color: #00ff88; box-shadow: 0 0 20px rgba(0,255,136,.3); }
body.ui-premium .lx-res-badge .lb-svg { width: 12px; height: 12px; }
body.ui-premium .lx-res-sub { margin-top: 4px; font: 400 11px/1.5 var(--lb-mono); letter-spacing: .06em; color: rgba(255,255,255,.55); text-align: center; }
body.ui-premium .lx-res-board { margin: 20px 0; display: flex; justify-content: space-around; align-items: center; padding: 18px; border-radius: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
body.ui-premium .lx-team { flex: 1; min-width: 0; } body.ui-premium .lx-team b { font: 700 34px var(--lb-sg); color: rgba(255,255,255,.7); } body.ui-premium .lx-team b.w { color: #00ff88; text-shadow: 0 0 16px rgba(0,255,136,.5); } body.ui-premium .lx-team b.l { color: #fff; }
body.ui-premium .lx-team p { margin: 4px 0 0; font: 400 9px var(--lb-mono); letter-spacing: .1em; color: rgba(255,255,255,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
body.ui-premium .lx-vs { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font: 400 10px var(--lb-mono); color: rgba(255,255,255,.4); flex: 0 0 auto; }
body.ui-premium .overlay.res-win .lx-grid3, body.ui-premium .overlay.res-lose .lx-grid3 { text-align: left; }
body.ui-premium .lx-res-lvl { margin-top: 16px; text-align: left; } body.ui-premium .lx-res-lvt { display: flex; justify-content: space-between; font: 400 9px var(--lb-mono); letter-spacing: .1em; color: rgba(255,255,255,.6); }
body.ui-premium .lx-res-lvl .lx-hint { margin-top: 6px; }
body.ui-premium .overlay.res-lose .lx-bar.big i { background: rgba(255,255,255,.3); box-shadow: none; }
body.ui-premium .overlay-btn.primary { background: #00ff88 !important; color: #0A0A14 !important; border-color: #00ff88 !important; box-shadow: 0 0 24px rgba(0,255,136,.4); }
body.ui-premium .overlay.res-lose .overlay-btn.primary { background: rgba(255,255,255,.9) !important; box-shadow: none; }
body.ui-premium .lx-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
body.ui-premium .lx-confetti i { position: absolute; top: 0; width: 8px; height: 8px; border-radius: 50%; animation: lxfall 3s infinite linear; }
@keyframes lxfall { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 0; } }
body.ui-premium .overlay.res-win .overlay-msg, body.ui-premium .overlay.res-lose .overlay-msg { text-align: center; }
body.ui-premium .lx-team { text-align: center; }

/* pausa */
body.ui-premium .overlay.res-pause { align-items: center; justify-content: center; background: rgba(6,6,14,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.ui-premium .overlay.res-pause .overlay-box { margin: auto; max-width: 380px; padding: 22px 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.5); text-align: center; }
body.ui-premium .overlay.res-pause .lx-chip { display: none !important; }
body.ui-premium .overlay.res-pause .overlay-title { text-align: center; font: 700 18px var(--lb-sg); letter-spacing: .15em; text-shadow: none; }
body.ui-premium .overlay.res-pause .overlay-title::after { content: none; }
body.ui-premium .overlay.res-pause .overlay-msg { text-align: center; font: 400 9px var(--lb-mono); letter-spacing: .15em; color: rgba(255,255,255,.4); margin-top: 4px; }
body.ui-premium .overlay.res-pause .overlay-actions { gap: 10px; margin-top: 18px; }
body.ui-premium .overlay.res-pause .overlay-btn, body.ui-premium .overlay.res-pause .overlay-btn.secondary { height: 52px; border-radius: 16px; font: 700 12px var(--lb-sg); letter-spacing: .12em; color: #fff; }
body.ui-premium .overlay.res-pause .overlay-btn:first-child { background: #00ff88; color: #0A0A14; border-color: #00ff88; box-shadow: 0 0 20px rgba(0,255,136,.3); }
body.ui-premium .overlay-btn.danger { background: rgba(255,80,80,.1) !important; border-color: rgba(255,80,80,.25) !important; color: #ff6b6b !important; }
/* tutorial */
body.ui-premium .lx-step { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 10px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
body.ui-premium .lx-stn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: rgba(0,255,136,.15); border: 1px solid rgba(0,255,136,.3); font: 400 11px var(--lb-mono); color: #00ff88; }
body.ui-premium .lx-sti { width: 56px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); }
body.ui-premium .lx-sti .lb-svg { width: 20px; height: 20px; }
body.ui-premium .lx-ill-ball { width: 40px; height: 2px; background: #fff; position: relative; } body.ui-premium .lx-ill-ball i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #00ff88; transform: translate(-50%,-50%); box-shadow: 0 0 8px #00ff88; }
body.ui-premium .lx-step h4 { margin: 0; font: 700 11px var(--lb-sg); letter-spacing: .06em; color: #fff; } body.ui-premium .lx-step p { margin: 4px 0 0; font: 400 9px/1.4 var(--lb-mono); color: rgba(255,255,255,.55); }

/* HUD da partida */
body.ui-premium .touch-controls .score-panel { background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; font-family: var(--lb-sg); font-weight: 700; color: #fff; letter-spacing: .12em; }
body.ui-premium .touch-controls .pad-btn { all: unset; box-sizing: border-box; cursor: pointer; width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 28px; box-shadow: 0 4px 20px rgba(0,0,0,.3); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); touch-action: none; -webkit-tap-highlight-color: transparent; transition: .1s; }
body.ui-premium .touch-controls .pad-btn:active { transform: scale(.92); background: rgba(0,255,136,.15); border-color: #00ff88; color: #00ff88; }
body.ui-premium .touch-controls .pad-group { gap: 14px; }
body.ui-premium .touch-controls .start-btn { all: unset; box-sizing: border-box; cursor: pointer; height: 40px; padding: 0 16px; border-radius: 20px; display: inline-grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; font: 700 11px var(--lb-sg); letter-spacing: .12em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
body.ui-premium .touch-controls .start-btn#startBtn { background: #00ff88; color: #0A0A14; border-color: #00ff88; box-shadow: 0 0 16px rgba(0,255,136,.35); }

/* =====================================================================
   SELEÇÃO DE PARTIDA (2ª tela) — padrão lobby futurista
   ===================================================================== */
body.ui-premium.in-lobby {
  background-color: #0A0A14;
  background-image:
    radial-gradient(700px 500px at 50% -120px, rgba(0,245,255,.18), transparent 70%),
    radial-gradient(400px 400px at 105% 40%, rgba(255,0,170,.12), transparent 70%),
    radial-gradient(500px 500px at -10% 100%, rgba(0,255,136,.09), transparent 70%);
}
body.ui-premium .profile-row, body.ui-premium .gameplay-controls {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; box-shadow: none;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-family: var(--lb-sg);
}
body.ui-premium .profile-info .profile-name { font: 700 16px var(--lb-sg); letter-spacing: .04em; text-transform: uppercase; }
body.ui-premium .profile-info .coin-display { background: rgba(255,204,51,.12); border: 1px solid rgba(255,204,51,.4); color: #ffcc33; font-family: var(--lb-mono); }
body.ui-premium .profile-info .champ-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
body.ui-premium #statsBtn { color: #00f5ff !important; } body.ui-premium #achievementsBtn { color: #ffcc33 !important; } body.ui-premium #logoutBtn { color: rgba(255,255,255,.6) !important; }

body.ui-premium .gameplay-controls .dial-btn {
  --acc: #00ff88; min-height: 84px; padding: 12px 12px 12px 16px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  box-shadow: none; text-shadow: none; font: 700 14px var(--lb-sg); letter-spacing: .08em; filter: none !important; transform: none !important;
}
body.ui-premium .gameplay-controls .dial-btn::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
body.ui-premium .gameplay-controls .dial-btn::after { right: 10px; top: 10px; width: 34px; height: 34px; background: var(--acc); opacity: .85; transform: none; }
body.ui-premium .gameplay-controls .dial-btn[data-mode="paredao"] { --acc: #00ff88; } body.ui-premium .gameplay-controls .dial-btn[data-mode="tenis"] { --acc: #00f5ff; }
body.ui-premium .gameplay-controls .dial-btn[data-mode="futebol"] { --acc: #ffcc33; } body.ui-premium .gameplay-controls .dial-btn[data-mode="barreira"] { --acc: #ff00ff; }
body.ui-premium .gameplay-controls .dial-btn[data-mode="paredao"], body.ui-premium .gameplay-controls .dial-btn[data-mode="tenis"], body.ui-premium .gameplay-controls .dial-btn[data-mode="futebol"], body.ui-premium .gameplay-controls .dial-btn[data-mode="barreira"] { background: rgba(255,255,255,.05); text-shadow: none; }
body.ui-premium .gameplay-controls .dial-btn.active { background: color-mix(in srgb, var(--acc) 14%, rgba(255,255,255,.05)); border-color: var(--acc); box-shadow: 0 0 20px color-mix(in srgb, var(--acc) 35%, transparent); }
body.ui-premium .gameplay-controls .dial-btn:not(.active) { opacity: .8; }
body.ui-premium .gameplay-controls .dial-btn .mini-trophy { right: 12px; bottom: 10px; font-size: 0; }

body.ui-premium .gameplay-controls .champ-row .champ-btn {
  min-height: 70px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); box-shadow: none; font: 700 10px var(--lb-sg); letter-spacing: .1em; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body.ui-premium .gameplay-controls .champ-row .champ-btn.active { border-color: var(--ac); box-shadow: 0 0 16px color-mix(in srgb, var(--ac) 30%, transparent); }
body.ui-premium .gameplay-controls .target-label { font: 400 10px var(--lb-mono); letter-spacing: .18em; color: rgba(255,255,255,.55); }
body.ui-premium .gameplay-controls .target-row { padding: 4px; border-radius: 16px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.08); gap: 4px; }
body.ui-premium .gameplay-controls .target-label { margin: 6px 4px 2px; }
body.ui-premium .gameplay-controls .target-btn, body.ui-premium .gameplay-controls .target-btn:first-of-type, body.ui-premium .gameplay-controls .target-btn:last-of-type { border: 0; border-radius: 12px; background: transparent; color: rgba(255,255,255,.5); font: 400 11px var(--lb-mono); letter-spacing: .1em; text-transform: uppercase; }
body.ui-premium .gameplay-controls .target-btn.active { background: #00f5ff; color: #0A0A14; font-weight: 700; box-shadow: 0 0 10px rgba(0,245,255,.3); text-shadow: none; }
body.ui-premium .gameplay-controls .instructions { font: 400 10px/1.5 var(--lb-mono); color: rgba(255,255,255,.4); }
body.ui-premium .touch-controls .start-btn.off { opacity: .55; }

/* HUD: botões em grade 2x2 e placar compacto */
body.ui-premium .touch-controls .quick-start-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; flex: 1 1 auto; min-width: 0; }
body.ui-premium .touch-controls .quick-start-row .score-panel { grid-column: 1 / -1; font-size: 18px; line-height: 1.25; padding: 8px 12px; text-align: center; white-space: normal; }
body.ui-premium .touch-controls .quick-start-row .timer-panel { grid-column: 1 / -1; text-align: center; font: 700 11px var(--lb-mono); color: #ffcc33; }
body.ui-premium .touch-controls .quick-start-row .start-btn {
  all: unset !important; box-sizing: border-box !important; cursor: pointer; height: 44px; padding: 0 6px !important; border-radius: 16px !important; display: grid !important; place-items: center;
  background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.14) !important; color: #fff !important; font: 700 11px var(--lb-sg) !important; letter-spacing: .1em; text-transform: uppercase; text-align: center; -webkit-tap-highlight-color: transparent; box-shadow: none !important; text-shadow: none !important;
}
body.ui-premium .touch-controls .quick-start-row #startBtn { grid-column: 1 / -1; height: 48px; background: #00ff88 !important; color: #0A0A14 !important; border-color: #00ff88 !important; box-shadow: 0 0 16px rgba(0,255,136,.35) !important; }
body.ui-premium .touch-controls .quick-start-row #musicBtn:not(.off), body.ui-premium .touch-controls .quick-start-row #soundBtn { border-color: rgba(0,245,255,.5) !important; color: #00f5ff !important; }
body.ui-premium .touch-controls .quick-start-row .start-btn.off { opacity: .6; color: rgba(255,255,255,.6) !important; }
body.ui-premium .touch-controls .quick-start-row #menuBtn, body.ui-premium .touch-controls .quick-start-row #soundBtn { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: none !important; padding: 0 6px !important; }
body.ui-premium .touch-controls .quick-start-row #soundBtn { border-color: rgba(0,245,255,.5) !important; }
body.ui-premium .touch-controls .quick-start-row #startBtn { text-transform: uppercase; }
body.ui-premium .touch-controls .quick-start-row .start-btn { height: 44px !important; min-height: 44px; font-size: 11px !important; }
body.ui-premium .touch-controls .quick-start-row #startBtn { height: 52px !important; font-size: 13px !important; }
body.ui-premium .touch-controls .quick-start-row .score-panel { font-size: 16px; }
body.ui-premium .touch-controls .quick-start-row .start-btn { place-items: center !important; text-align: center !important; align-content: center; }
body.ui-premium .touch-controls .quick-start-row #startBtn { grid-column: 1 / -1 !important; }
body.ui-premium .touch-controls .quick-start-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
body.ui-premium .touch-controls .quick-start-row .start-btn { font-size: 10px !important; letter-spacing: .05em; }
body.ui-premium .touch-controls .quick-start-row #startBtn { font-size: 13px !important; letter-spacing: .12em; }

/* botão de música fixo no topo */
.top-music { all: unset; box-sizing: border-box; position: fixed; z-index: 70; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; height: 38px; padding: 0 12px 0 10px; display: flex; align-items: center; gap: 7px; border-radius: 20px; cursor: pointer;
  background: rgba(10,10,20,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid #00ff88; color: #00ff88; box-shadow: 0 0 14px rgba(0,255,136,.45); font: 700 10px 'Space Grotesk', system-ui, sans-serif; letter-spacing: .1em; -webkit-tap-highlight-color: transparent; }
.top-music .lb-svg { width: 18px; height: 18px; }
.top-music .tm-x { opacity: 0; }
.top-music.off { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.75); box-shadow: none; }
.top-music.off .tm-x { opacity: 1; }
.top-music:active { transform: scale(.95); }
body.ui-premium .touch-controls .quick-start-row { grid-template-columns: repeat(2, 1fr); }
body.ui-premium:not(.in-lobby) .lb-header { padding-top: 58px; }
.achievement-toast-icon { display: grid; place-items: center; width: 40px; height: 40px; font-size: 0; color: #ffcc33; }
.achievement-toast-icon .lb-svg { width: 30px; height: 30px; }
.achievement-toast { top: calc(env(safe-area-inset-top, 0px) + 58px) !important; }
body.ui-premium .lx-chip { display: none !important; }

/* ===== Tela de entrada — modelo "v2": lobby futurista com fotos ===== */
@font-face { font-family:'Nunito'; font-weight:800; font-display:swap; src:url(fonts/nunito-latin-800-normal.woff2) format('woff2'); }
.welcome { display:none; position:fixed; inset:0; z-index:60; flex-direction:column; overflow:hidden; background:#08080e; color:#fff; font-family:'JetBrains Mono',monospace; }
body.need-login .welcome { display:flex; }
.welcome *, .welcome *::before, .welcome *::after { box-sizing:border-box; }
.wl-bg { position:absolute; inset:0; pointer-events:none; }
.wl-photo { position:absolute; left:0; width:100%; overflow:hidden; background-size:cover; }
.wl-top { top:0; height:62%; background-image:url(img/lobby-hero.webp); background-position:center 30%; filter:grayscale(.55) contrast(1.15) brightness(.52); transform:scale(1.08); }
.wl-bot { bottom:0; height:58%; background-image:url(img/lobby-champ.webp); background-position:center 45%; filter:grayscale(.65) contrast(1.18) brightness(.46); transform:scale(1.12); }
.wl-bg::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,8,14,.1) 0%,rgba(8,8,14,.62) 30%,#08080e 58%,rgba(8,8,14,.85) 72%,rgba(8,8,14,.2) 100%); }
.wl-bg::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(109,74,255,.22),transparent 55%,rgba(14,165,168,.18)); mix-blend-mode:color; }
.wl-glow { position:absolute; z-index:2; top:-12%; left:-18%; width:90%; height:62%; border-radius:50%; filter:blur(90px); opacity:.42; background:radial-gradient(60% 60% at 30% 30%,rgba(109,74,255,.5),transparent 75%); }
.wl-scan { position:absolute; inset:0; z-index:3; opacity:.07; background-image:repeating-linear-gradient(0deg,transparent 0 2px,#fff 2px 3px); mix-blend-mode:screen; }
.wl-header { position:relative; z-index:10; display:flex; align-items:flex-start; gap:10px; padding:calc(20px + env(safe-area-inset-top)) 148px 12px 20px; }
.wl-tg { flex:none; width:40px; height:40px; border-radius:12px; background:#fff; color:#000; display:grid; place-items:center; font-family:'Nunito',sans-serif; font-weight:800; font-size:15px; letter-spacing:-.05em; box-shadow:0 2px 12px rgba(255,255,255,.2); }
.wl-name { display:flex; align-items:baseline; gap:5px; line-height:1; white-space:nowrap; padding-top:1px; }
.wl-name b { font-family:'Nunito',sans-serif; font-weight:800; font-size:12.5px; letter-spacing:.06em; }
.wl-name em { font-style:normal; font-family:'Nunito',sans-serif; font-weight:800; font-size:11px; letter-spacing:.08em; color:#33e8e8; }
.wl-name s { text-decoration:none; font-size:10px; color:rgba(255,255,255,.35); margin-left:2px; }
.wl-tag { display:flex; align-items:center; gap:8px; margin-top:7px; }
.wl-line { width:26px; height:2px; border-radius:2px; background:#33e8e8; box-shadow:0 0 8px rgba(51,232,232,.6); flex:none; }
.wl-tag span:last-child { font-size:9px; letter-spacing:.16em; color:rgba(255,255,255,.5); white-space:nowrap; }
.wl-marquee { position:relative; z-index:4; padding:4px 20px 0; overflow:hidden; opacity:.035; pointer-events:none; user-select:none; }
.wl-marquee span { display:block; white-space:nowrap; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:52px; letter-spacing:-.06em; line-height:1; }
.wl-main { position:relative; z-index:10; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 20px 20px; }
.wl-card { position:relative; width:100%; max-width:342px; padding:22px; display:flex; flex-direction:column; gap:18px; border-radius:32px; border:1px solid rgba(255,255,255,.11); background:linear-gradient(180deg,rgba(24,24,34,.84),rgba(16,16,24,.8)); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); box-shadow:0 20px 60px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14); overflow:hidden; }
.wl-card::before { content:""; position:absolute; inset:0; opacity:.04; pointer-events:none; background-image:radial-gradient(circle,#fff 1.2px,transparent 1.6px); background-size:18px 18px; }
.wl-field { position:relative; height:54px; border-radius:999px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 2px rgba(0,0,0,.6); padding:0 20px; display:flex; align-items:center; transition:all .3s; }
.wl-field:focus-within { border-color:rgba(34,211,238,.4); background:rgba(0,0,0,.75); box-shadow:0 0 0 3px rgba(34,211,238,.12),inset 0 1px 2px rgba(0,0,0,.6); }
#welcomeName { width:100%; background:transparent; border:0; outline:none; color:#fff; font-family:'JetBrains Mono',monospace; font-size:16px; letter-spacing:.01em; -webkit-appearance:none; appearance:none; }
#welcomeName::placeholder { color:#7a8da0; }
#welcomeName.shake { animation:wlShake .38s; }
@keyframes wlShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
#welcomeEnter { position:relative; width:100%; height:56px; border:0; border-radius:999px; font-family:'Nunito',sans-serif; font-weight:800; font-size:15px; letter-spacing:.08em; text-transform:uppercase; color:#fff; cursor:pointer; background:linear-gradient(135deg,#6d4aff,#0ea5a8); box-shadow:0 4px 16px rgba(0,0,0,.3),0 0 24px rgba(109,74,255,.35); transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .2s; -webkit-tap-highlight-color:transparent; }
#welcomeEnter:active { transform:scale(.97); }
#welcomeEnter.is-empty { background:linear-gradient(180deg,#3a3a4a,#2a2a36); color:rgba(255,255,255,.5); box-shadow:0 4px 16px rgba(0,0,0,.3); }
.wl-hint { margin:20px 0 0; padding:0 24px; text-align:center; font-size:10px; line-height:1.5; letter-spacing:.18em; color:rgba(255,255,255,.4); text-transform:uppercase; }
.wl-footer { position:relative; z-index:10; display:flex; flex-direction:column; align-items:center; gap:6px; padding:4px 20px calc(16px + env(safe-area-inset-bottom)); }
.wl-credit { display:flex; align-items:center; gap:8px; font-size:9px; letter-spacing:.18em; color:rgba(255,255,255,.4); text-transform:uppercase; text-align:center; }
.wl-dot { width:6px; height:6px; border-radius:50%; background:#2eff88; box-shadow:0 0 8px rgba(46,255,136,.6); animation:wlPulse 2s ease-in-out infinite; flex:none; }
@keyframes wlPulse { 50%{opacity:.4} }
.wl-pill { padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.05); font-size:8px; letter-spacing:.16em; color:rgba(255,255,255,.3); text-transform:uppercase; text-align:center; }
@media (max-height:620px) { .wl-marquee{display:none} .wl-card{gap:12px;padding:16px} }
@media (prefers-reduced-motion: reduce) { .wl-dot,#welcomeName.shake{animation:none !important} }