*, *::before, *::after { box-sizing: border-box; }

:root {
  --estadual-a: #e0a465;
  --estadual-b: #8a5320;
  --nacional-a: #e8eef6;
  --nacional-b: #8b97a5;
  --internacional-a: #ffdc6b;
  --internacional-b: #c08d10;
  --mundial-a: #a9f6ff;
  --mundial-b: #17a2c9;
  --verde: #2fbf71;
}

html, body {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(1200px 700px at 50% -10%, #1d3557 0%, #0b1220 55%, #05080f 100%);
  color: #eaf2ff;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage {
  position: relative;
  height: min(96vh, 760px);
  aspect-ratio: 480 / 720;
  max-width: 100vw;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
  touch-action: none;
  user-select: none;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
}

/* ---------------- HUD ---------------- */
.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s ease, transform .35s ease;
}
.hud.on { opacity: 1; transform: none; }

.hud-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.pontos {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 24px rgba(120, 200, 255, .35);
  transition: transform .12s cubic-bezier(.2, 1.7, .5, 1);
}
.pontos.pop { transform: scale(1.22); }
.pontos small { font-size: 15px; font-weight: 600; opacity: .65; margin-left: 5px; }

.passes {
  font-size: 13px;
  opacity: .75;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.passes b { font-size: 17px; margin-left: 4px; }

.taca-bar { display: flex; gap: 7px; flex-wrap: wrap; }

.taca-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 6px;
  border-radius: 999px;
  background: rgba(4, 10, 22, .45);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
  font-size: 13px;
  font-weight: 700;
  opacity: .45;
  transition: opacity .25s ease, transform .18s cubic-bezier(.2, 1.7, .5, 1);
}
.taca-chip.ativo { opacity: 1; }
.taca-chip.pop { transform: scale(1.25); }

.taca-chip i, .legenda i.t {
  width: 13px;
  height: 15px;
  display: inline-block;
  clip-path: polygon(15% 0, 85% 0, 85% 33%, 68% 58%, 62% 78%, 82% 78%, 82% 100%, 18% 100%, 18% 78%, 38% 78%, 32% 58%, 15% 33%);
}
[data-tier="estadual"] i, i.t.estadual { background: linear-gradient(160deg, var(--estadual-a), var(--estadual-b)); }
[data-tier="nacional"] i, i.t.nacional { background: linear-gradient(160deg, var(--nacional-a), var(--nacional-b)); }
[data-tier="internacional"] i, i.t.internacional { background: linear-gradient(160deg, var(--internacional-a), var(--internacional-b)); }
[data-tier="mundial"] i, i.t.mundial { background: linear-gradient(160deg, var(--mundial-a), var(--mundial-b)); box-shadow: 0 0 10px rgba(120, 235, 255, .7); }

/* ---------------- Painéis ---------------- */
.painel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 9, 20, .55);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.painel.show { opacity: 1; visibility: visible; }

.card {
  width: 100%;
  max-width: 360px;
  padding: 26px 24px 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(30, 45, 75, .92), rgba(12, 20, 38, .95));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
  text-align: center;
  transform: translateY(14px) scale(.97);
  transition: transform .38s cubic-bezier(.2, 1.2, .3, 1);
}
.painel.show .card { transform: none; }

h1 {
  margin: 0;
  font-size: 44px;
  line-height: .95;
  letter-spacing: -2px;
  font-weight: 900;
  background: linear-gradient(180deg, #fff, #9fd0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1 span { color: transparent; background: linear-gradient(180deg, #ffe07a, #ff9f1c); -webkit-background-clip: text; background-clip: text; }
h2 { margin: 0 0 14px; font-size: 25px; font-weight: 800; letter-spacing: -.5px; }
.sub { margin: 6px 0 18px; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; opacity: .65; }

.legenda {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13.5px;
  text-align: left;
}
.legenda div { display: flex; align-items: center; gap: 9px; }
.legenda b { margin-left: auto; opacity: .8; }

.btn {
  width: 100%;
  padding: 13px 16px;
  margin-top: 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 13px;
  background: rgba(255, 255, 255, .07);
  color: #eaf2ff;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .5px;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover { background: rgba(255, 255, 255, .14); }
.btn:active { transform: scale(.97); }
.btn.primary {
  background: linear-gradient(180deg, #37d17f, #17a05b);
  border-color: rgba(255, 255, 255, .25);
  box-shadow: 0 8px 22px rgba(23, 160, 91, .38);
  color: #04240f;
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; font-weight: 600; opacity: .8; }
.btn.ghost:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.btn.danger { color: #ff9d9d; }

.linha-btns { display: flex; gap: 9px; }
.linha-btns .btn { margin-top: 12px; }

.dica { margin: 14px 0 0; font-size: 12px; opacity: .5; }

.placar { margin: 4px 0 12px; }
.placar .big {
  font-size: 62px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -3px;
  background: linear-gradient(180deg, #fff, #ffd76b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.placar .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; opacity: .55; margin-top: 4px; }

.resumo { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13.5px; text-align: left; }
.resumo .lin { display: flex; align-items: center; gap: 9px; padding: 5px 9px; border-radius: 9px; background: rgba(255, 255, 255, .05); }
.resumo .lin b { margin-left: auto; }
.resumo .lin.zero { opacity: .3; }

.recorde {
  display: none;
  margin: 0 0 12px;
  padding: 7px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #0a2a16;
  background: linear-gradient(90deg, #ffd76b, #7ef0a8);
  animation: brilha 1.4s ease-in-out infinite;
}
.recorde.on { display: block; }
@keyframes brilha { 50% { filter: brightness(1.22); } }

.form { display: flex; gap: 8px; }
.form input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  margin-top: 9px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form input:focus { border-color: #37d17f; box-shadow: 0 0 0 3px rgba(55, 209, 127, .18); }
.form .btn { width: auto; flex: 0 0 auto; padding: 12px 15px; font-size: 13.5px; }

/* ---------------- Ranking ---------------- */
.ranking {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
  display: grid;
  gap: 6px;
  text-align: left;
}
.ranking::-webkit-scrollbar { width: 6px; }
.ranking::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }

.ranking li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid transparent;
  font-size: 14px;
  animation: entra .35s backwards;
}
@keyframes entra { from { opacity: 0; transform: translateX(-10px); } }
.ranking li.destaque { border-color: #37d17f; background: rgba(55, 209, 127, .14); }
.ranking .pos { width: 24px; font-weight: 900; opacity: .55; font-size: 15px; }
.ranking li:nth-child(1) .pos { color: #ffd76b; opacity: 1; }
.ranking li:nth-child(2) .pos { color: #dfe7f0; opacity: 1; }
.ranking li:nth-child(3) .pos { color: #e0a465; opacity: 1; }
.ranking .nome { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .tacas { display: flex; gap: 3px; opacity: .85; }
.ranking .tacas span { font-size: 10.5px; font-weight: 700; display: flex; align-items: center; gap: 2px; }
.ranking .tacas i { width: 8px; height: 10px; display: inline-block; clip-path: polygon(15% 0, 85% 0, 85% 33%, 68% 58%, 62% 78%, 82% 78%, 82% 100%, 18% 100%, 18% 78%, 38% 78%, 32% 58%, 15% 33%); }
.ranking .pts { font-weight: 900; font-size: 16px; min-width: 34px; text-align: right; }
.ranking .vazio { justify-content: center; opacity: .45; font-style: italic; }

/* ---------------- Som ---------------- */
.som {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(4, 10, 22, .5);
  color: #eaf2ff;
  font-size: 15px;
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s ease, transform .15s ease;
  z-index: 5;
}
.som:hover { opacity: 1; }
.som:active { transform: scale(.9); }
.som.mudo { opacity: .3; text-decoration: line-through; }

@media (max-width: 430px) {
  .stage { border-radius: 0; height: 100vh; width: 100vw; aspect-ratio: auto; }
  h1 { font-size: 38px; }
}