/* Atalhos agrupados da barra do topo (Eventos, Lojas): botão com seta e menu suspenso no padrão das janelas. */

.topbar { position: relative; z-index: 60; }
.scgroup { position: relative; display: grid; }

/* Botão do grupo */
.scgroupbtn .sccaret {
  position: absolute; right: 4px; top: 5px; width: 0; height: 0;
  border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid var(--gold);
  opacity: 0.85; pointer-events: none;
}
.scgroup.open .scgroupbtn::after { opacity: 0; }
.scgroupbtn .scdot {
  position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: #e5533d; box-shadow: 0 0 0 2px #0b141c, 0 0 8px rgb(229 83 61 / 80%); pointer-events: none;
}
.scmark {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  padding: 1px 4px; border-radius: 3px; white-space: nowrap; pointer-events: none;
  font: 800 8px/1.15 "Segoe UI", sans-serif; letter-spacing: 0.05em; color: #fff;
  background: #3a4c5c; box-shadow: 0 0 0 1px #0b141c;
}
.scmark.live { background: #e0352a; box-shadow: 0 0 0 1px #0b141c, 0 0 8px rgb(255 74 58 / 80%); animation: scpulse 1.4s ease-in-out infinite; }
.scmark.soon { background: #e07b1a; }
.scmark.open { background: #2f9e57; }
@keyframes scpulse { 50% { box-shadow: 0 0 0 1px #0b141c, 0 0 2px rgb(255 74 58 / 30%); } }

/* Menu suspenso */
.scmenu {
  --shift: 0px;
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(calc(-50% + var(--shift)));
  width: 320px; padding: 0 6px 6px; display: grid; gap: 4px;
  background: linear-gradient(170deg, #0f1c27, #0b1620 60%, #0e1f24);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 55%), 0 18px 40px rgb(0 0 0 / 65%), 0 0 24px rgb(79 216 232 / 10%);
  animation: scin 0.12s ease-out;
}
.scmenu[hidden] { display: none; }
@keyframes scin { from { opacity: 0; margin-top: -6px; } to { opacity: 1; margin-top: 0; } }
.scmenu::before {
  content: ""; position: absolute; top: -6px; left: calc(50% - var(--shift)); width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: #0d1821; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.scmhead {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 0 -6px 2px; padding: 8px 14px 7px; border-radius: 10px 10px 0 0;
  background: linear-gradient(#0d1821, #0a131b); border-bottom: 1px solid var(--line);
}
.scmhead::before, .scmhead::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
  background: var(--cyan); transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 8px var(--cyan);
}
.scmhead::before { left: -4px; }
.scmhead::after { right: -4px; }
.scmhead span { font: 600 15px/1 Georgia, serif; font-variant: small-caps; letter-spacing: 0.1em; color: var(--gold); }
.scmhead em { font-style: normal; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); }

/* Itens */
body.playing .scitem {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; padding: 5px 10px 5px 5px; border-radius: 8px; text-align: left;
  background: #0a141c; border: 1px solid var(--edge); color: var(--text);
  transition: border-color 0.1s, background 0.1s, box-shadow 0.1s;
}
body.playing .scitem:hover, body.playing .scitem:focus-visible, body.playing .scitem:focus {
  outline: none; border-color: var(--line); background: linear-gradient(#1a2a38, #0f1b26);
  box-shadow: inset 3px 0 0 var(--cyan);
}
body.playing .scitem.prize { border-color: rgb(229 83 61 / 55%); }
.scface {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 8px; background: radial-gradient(circle at 50% 35%, #1f3445, #0f1b26 70%); border: 1px solid #2a3f52;
}

/* Arte pintada dos menus: respira, halo pulsa, brilho passa só sobre o desenho (máscara = a arte). */
.mnx { --c: 79 216 232; position: relative; width: 38px; height: 38px; display: grid; place-items: center; pointer-events: none; }
.mart { position: relative; width: 100%; height: 100%; animation: mnxbob 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.mart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 60%)); }
.mgl { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.mgl i { position: absolute; top: -10%; bottom: -10%; left: -60%; width: 45%; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 85%), transparent); animation: mnxglint 4.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.mhalo { position: absolute; inset: -18%; border-radius: 50%; opacity: .35;
  background: radial-gradient(circle, rgb(var(--c) / 55%), rgb(var(--c) / 0) 62%); animation: mnxhalo 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.mst { position: absolute; width: 8px; height: 8px; opacity: 0; animation: mnxtwinkle 2.8s ease-in-out infinite; }
.mst::before, .mst::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 1px; box-shadow: 0 0 4px rgb(var(--c)); }
.mst::before { width: 1.5px; height: 8px; margin: -4px 0 0 -.75px; }
.mst::after { width: 8px; height: 1.5px; margin: -.75px 0 0 -4px; }
.mst.a { right: -2px; top: 0; animation-delay: calc(var(--d, 0s) + .4s); }
.mst.b { left: -1px; bottom: 6px; animation-delay: calc(var(--d, 0s) + 1.6s); }
@keyframes mnxbob { 50% { transform: translateY(-1.5px) scale(1.04); } }
@keyframes mnxglint { 0%, 62% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(420%) skewX(-18deg); } }
@keyframes mnxhalo { 50% { opacity: .7; transform: scale(1.08); } }
@keyframes mnxtwinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 40% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; } }
@keyframes mnxpop { 0% { transform: scale(1); } 60% { transform: scale(1.22) rotate(-6deg); } 100% { transform: scale(1.14) rotate(-3deg) translateY(-1px); } }
.scitem:hover .mart, .scitem:focus .mart { animation: mnxpop .45s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.mnx.fx-ember .mhalo { animation: mnxember .35s steps(2) infinite alternate; }
@keyframes mnxember { from { opacity: .45; } to { opacity: .8; } }
.mnx.fx-eyes .mhalo { animation-duration: 1.4s; }
.mnx.fx-float .mart { animation: mnxfloat 2.6s ease-in-out infinite; }
@keyframes mnxfloat { 50% { transform: translateY(-3px); } }
.mnx.fx-spin .mhalo { opacity: .8; animation: mnxspin 4s linear infinite;
  background: conic-gradient(from 0deg, rgb(var(--c) / 0), rgb(var(--c) / 60%), rgb(var(--c) / 0) 40%, rgb(200 120 255 / 50%), rgb(var(--c) / 0) 80%);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 44% 58%, transparent 61%); mask: radial-gradient(circle, transparent 42%, #000 44% 58%, transparent 61%); }
@keyframes mnxspin { to { transform: rotate(1turn); } }

/* Botões da barra: a arte respira e dá um pulinho no hover */
.scnx { display: grid; place-items: center; animation: mnxbob 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); pointer-events: none; }
.shortcut:hover .scnx { animation: mnxpop .45s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.topsep { flex: none; width: 1px; height: 40px; margin: 0 3px; align-self: center; background: linear-gradient(transparent, #3a4858, transparent); }
body.playing .shortcut.vip { border-color: #8a6a2a; background: linear-gradient(rgb(255 230 160 / 14%), transparent 50%), linear-gradient(#2e2618, #17130c 60%, #120f0a); }
body.playing .shortcut.pass { border-color: #5a3f8a; background: linear-gradient(rgb(200 160 255 / 14%), transparent 50%), linear-gradient(#251d36, #15111f 60%, #110d19); }
.scnew {
  position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); z-index: 3; padding: 1px 4px; border-radius: 3px; pointer-events: none;
  font: 800 8px/1.15 "Segoe UI", sans-serif; letter-spacing: .05em; color: #1a1205;
  background: linear-gradient(#ffe7a3, #e8c872); box-shadow: 0 0 0 1px #0b141c, 0 0 8px rgb(232 200 114 / 60%);
}
@media (max-width: 1280px) { .topsep { height: 30px; margin: 0 1px; } }
@media (prefers-reduced-motion: reduce) {
  .mart, .mgl i, .mhalo, .mst, .scnx { animation: none !important; }
}
.scface .scdot {
  position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: #e5533d; box-shadow: 0 0 0 2px #0b141c, 0 0 8px rgb(229 83 61 / 80%);
}
.sctext { display: grid; gap: 1px; min-width: 0; }
.sctext b { font-weight: 600; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scitem:hover .sctext b, .scitem:focus .sctext b { color: var(--gold); }
.sctext small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scitem.prize .sctext small { color: #ff9a8a; }

/* Selos */
.scbadge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  font: 700 10px/1.4 "Segoe UI", sans-serif; letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
  color: var(--muted); border: 1px solid var(--edge); background: rgb(0 0 0 / 30%);
}
.scbadge[hidden] { display: none; }
.scbadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.scbadge.live { color: #ff7a6b; border-color: rgb(255 74 58 / 60%); background: rgb(255 74 58 / 12%); }
.scbadge.live::before { box-shadow: 0 0 7px #ff4a3a; animation: scblink 1.2s infinite; }
@keyframes scblink { 50% { opacity: 0.35; } }
.scbadge.soon { color: #ffb45a; border-color: rgb(255 160 60 / 55%); background: rgb(255 160 60 / 10%); }
.scbadge.open { color: #7ee2a0; border-color: rgb(76 217 100 / 50%); background: rgb(76 217 100 / 10%); }
.scbadge.closed, .scbadge.idle { color: var(--muted); }
.scbadge.new { color: #1a1205; border-color: transparent; background: linear-gradient(#ffe7a3, #e8c872); }
.scbadge.new::before { display: none; }
.scbadge.closed::before { background: #6b7c89; }