/*
 * Conquista de Cores (src/minigames/color-conquest.js).
 * Mesmo vidro escuro do HUD dos outros jogos (Patrulha Estelar, Castelo):
 * pílulas rgba(8,12,36,.55) com borda branca suave e letra Fredoka.
 */
.game-stage--conquest { background: #0b1030; }
.game-stage--conquest .game-canvas { touch-action: none; cursor: crosshair; }

.cc-top {
  position: absolute; left: 10px; right: 10px; top: 10px; z-index: 2; pointer-events: none;
  display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: start;
}
.cc-pill {
  border-radius: 15px; border: 1px solid rgba(255,255,255,.18); background: rgba(8,12,36,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-family: var(--font-display, Fredoka, system-ui, sans-serif);
}

/* Sua parte da arena: bolinha da sua cor + porcentagem. */
.cc-share { height: 30px; box-sizing: border-box; display: flex; align-items: center; gap: 7px; padding: 0 12px 0 9px; }
.cc-share__dot {
  width: 14px; height: 14px; border-radius: 4px; background: var(--cc-color);
  box-shadow: 0 2px 0 var(--cc-deep), 0 0 10px color-mix(in srgb, var(--cc-color) 60%, transparent);
}
.cc-share__value { font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; min-width: 3.2em; }
.cc-share.is-out .cc-share__dot { animation: cc-blink .5s ease-in-out infinite alternate; }
@keyframes cc-blink { to { opacity: .35; } }

/* Barra até 100%, no formato da barra de setor da Patrulha Estelar. */
.cc-progress { position: relative; height: 30px; box-sizing: border-box; padding: 0 22px 0 12px; }
.cc-progress__track {
  position: absolute; left: 12px; right: 22px; top: 9px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14);
}
.cc-progress__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; min-width: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--cc-deep), var(--cc-color));
  box-shadow: 0 0 8px color-mix(in srgb, var(--cc-color) 70%, transparent);
  transition: width .35s ease-out;
}
.cc-progress__mark {
  position: absolute; top: 50%; width: 2px; height: 10px; transform: translate(-50%, -50%);
  border-radius: 1px; background: rgba(255,255,255,.35);
}
.cc-progress__mark.is-reached { background: #ffd84a; box-shadow: 0 0 6px #ffd84a; }
.cc-progress__mark.is-goal {
  width: auto; height: auto; background: none; font-size: .85rem; line-height: 1;
  filter: grayscale(.8) drop-shadow(0 1px 1px rgba(0,0,0,.4)); opacity: .8;
}
.cc-progress__mark.is-goal.is-reached { filter: drop-shadow(0 0 6px #ffd84a); opacity: 1; box-shadow: none; }
.cc-progress__label {
  position: absolute; left: 12px; top: 17px; color: rgba(255,255,255,.8);
  font-size: 9px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}

/* Placar: embaixo, à direita. */
.cc-board {
  grid-column: 2; justify-self: end; margin: 0; padding: 6px 10px; list-style: none;
  display: grid; gap: 2px; min-width: 128px; max-width: 60%; font-size: 11px; font-weight: 600;
}
.cc-board__row { display: grid; grid-template-columns: 1.1em 1fr auto; gap: 6px; align-items: center; }
.cc-board__pos { color: rgba(255,255,255,.55); }
.cc-board__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cc-color); }
.cc-board__pct { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.9); }
.cc-board__row.is-me .cc-board__name { color: #fff; font-weight: 700; }
.cc-board__row.is-me .cc-board__name::before {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: var(--cc-color); vertical-align: 0;
}
.cc-board__rivals {
  margin-top: 3px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.6); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}

/* Dica do começo: pílula de vidro embaixo. */
.cc-tip {
  position: absolute; left: 50%; bottom: 16px; z-index: 2; width: max-content; max-width: calc(100% - 40px); margin: 0;
  transform: translateX(-50%); padding: 8px 14px; border-radius: 15px; pointer-events: none; text-align: center;
  border: 1px solid rgba(255,255,255,.18); background: rgba(8,12,36,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: rgba(255,255,255,.92); font: 600 .78rem/1.3 var(--font-display, Fredoka, system-ui, sans-serif);
  transition: opacity .6s, transform .6s;
}
.cc-tip.is-gone { opacity: 0; transform: translate(-50%, 12px); }

/* Faixas ("Pegou!", marcos, fim): o mesmo cartão de vidro dos avisos de setor. */
.cc-splash {
  position: absolute; left: 50%; top: 40%; z-index: 4; max-width: 84%; padding: 14px 26px; border-radius: 20px; pointer-events: none;
  border: 1px solid rgba(255,255,255,.22); background: rgba(8,12,36,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; text-align: center; font: 700 1.45rem/1.2 var(--font-display, Fredoka, system-ui, sans-serif);
  text-shadow: 0 2px 10px rgba(0,0,0,.4); transform: translate(-50%, -50%);
}
.cc-splash[hidden] { display: none; }
.cc-splash.is-gold { color: #ffd84a; border-color: rgba(255,216,74,.45); }
.cc-splash.is-kill { color: #ffb35c; border-color: rgba(255,179,92,.45); }
.cc-splash.is-lose { color: #ff8fb4; border-color: rgba(255,90,122,.45); font-size: 1.1rem; }
.cc-splash.is-showing { animation: cc-pop 1.4s ease-out both; }
@keyframes cc-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  28% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -58%); }
}

/* Joystick que aparece onde o dedo tocou. */
.cc-joy {
  position: absolute; z-index: 2; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255,255,255,.3); background: rgba(8,12,36,.35);
  box-shadow: inset 0 0 18px rgba(120,200,255,.18);
}
.cc-joy[hidden] { display: none; }
.cc-joy__knob {
  position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  background: rgba(255,255,255,.88); box-shadow: 0 3px 10px rgba(0,0,0,.35);
  transform: translate(var(--kx, 0), var(--ky, 0));
}

@media (prefers-reduced-motion: reduce) {
  .cc-splash.is-showing, .cc-share.is-out .cc-share__dot { animation: none; }
  .cc-progress__fill { transition: none; }
}

/* On-line: contagem do servidor e cartão de resultado (mesmo vidro). */
.cc-count { z-index: 5; }
.cc-result {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px;
  background: rgba(4,8,26,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.cc-result__card {
  width: min(360px, 100%); padding: 18px 16px 16px; border-radius: 22px; text-align: center;
  border: 1px solid rgba(255,255,255,.2); background: rgba(8,12,36,.82); color: #fff;
  font-family: var(--font-display, Fredoka, system-ui, sans-serif); box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.cc-result__title { margin: 0 0 4px; font-size: 1.45rem; font-weight: 700; }
.cc-result__why { margin: 0 0 12px; color: rgba(255,255,255,.75); font-size: .85rem; }
.cc-result__list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: cc-pos; }
.cc-result__row {
  counter-increment: cc-pos; display: grid; grid-template-columns: 1.4em 1fr auto auto; gap: 8px; align-items: center;
  padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: .85rem; text-align: left;
}
.cc-result__row::before { content: counter(cc-pos); color: rgba(255,255,255,.55); font-weight: 700; }
.cc-result__row.is-me { background: color-mix(in srgb, var(--cc-color) 22%, transparent); outline: 1px solid color-mix(in srgb, var(--cc-color) 55%, transparent); }
.cc-result__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cc-color); font-weight: 700; }
.cc-result__row.is-me .cc-result__name { color: #fff; }
.cc-result__pct { font-variant-numeric: tabular-nums; font-weight: 700; }
.cc-result__kills { color: rgba(255,255,255,.65); font-size: .75rem; }
.cc-result__btn {
  min-height: 44px; padding: 8px 22px; border-radius: 16px; cursor: pointer; border: 1px solid rgba(255,255,255,.35);
  background: linear-gradient(180deg, #5be0a0, #22a868); color: #fff; font: 700 .95rem var(--font-display, Fredoka, system-ui, sans-serif);
}
.cc-result__btn:active { transform: scale(.97); }