.zs-stage {
  position: relative;
  width: min(100%, calc((100svh - 96px) * 1.6));
  aspect-ratio: 16 / 10;
  margin-inline: auto;
  border-radius: 26px 26px 26px 8px;
  overflow: hidden;
  background: #6ebeff;
  box-shadow: 0 30px 60px -28px rgba(21, 96, 189, .6), 0 0 0 4px #fff, 0 0 0 7px #ffcf4a;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 600px) {
  .zs-stage { aspect-ratio: 4 / 3; width: min(100%, calc((100svh - 96px) * 1.333)); border-radius: 18px 18px 18px 6px; }
}
.zs-stage:focus { outline: none; }
.zs-stage:focus-visible { outline: 3px solid var(--pg-blue); outline-offset: 6px; }
.zs-stage__sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-flying .zs-stage { cursor: pointer; }
.zs-ico { display: inline-block; vertical-align: -5px; flex: none; }

.zs-hud { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 8px 10px; padding: 10px 12px; pointer-events: none; font-variant-numeric: lining-nums tabular-nums; }
.zs-hud p { margin: 0; }
.zs-hud__score strong { display: inline-block; min-width: 2.6em; padding: 2px 14px; border-radius: 999px; background: #fff; color: var(--pg-ink); font: 800 1.6rem/1.2 var(--pg-serif); box-shadow: 0 4px 0 #1560bd; }
.zs-hud__chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--pg-ink); font-weight: 700; }
.zs-hud__streak { padding: 6px 14px; border-radius: 999px; background: #ff9f1c; color: #1b1200; font-weight: 800; transform: rotate(-3deg); }
.zs-hud__streak[data-heat='5'], .zs-hud__streak[data-heat='6'], .zs-hud__streak[data-heat='7'], .zs-hud__streak[data-heat='8'] { background: #ffd400; box-shadow: 0 0 18px rgba(255, 212, 0, .8); transform: rotate(-4deg) scale(1.08); }
.zs-hud__tools { margin-left: auto; display: flex; gap: 8px; pointer-events: auto; }
.zs-tool { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; color: var(--pg-blue); border: 2px solid var(--pg-blue); transform: skewX(-12deg); cursor: pointer; }
.zs-tool svg { transform: skewX(12deg); }
.zs-tool:hover { background: var(--pg-mist); }
.zs-tool[aria-pressed='false'] { color: #8aa0bf; border-color: #8aa0bf; }
.zs-tool[aria-pressed='false'] .zs-tool__waves { opacity: .1; }

.zs-pops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.zs-pop { position: absolute; margin: 0; transform: translate(-50%, 0); font: 800 1.1rem/1 var(--pg-sans); color: #fff; white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); animation: zs-float .95s cubic-bezier(.2, .8, .3, 1) both; }
.zs-pop--bolt { color: #fff6a8; }
.zs-pop--hot { color: #ffd400; font-size: 1.3rem; }
.zs-pop--ring { padding: 6px 12px; border-radius: 999px; background: #ffcf4a; color: #3a2400; text-shadow: none; font-size: 1.2rem; }
.zs-pop--close { padding: 6px 12px; border-radius: 999px; background: #7ce8ff; color: #06303d; text-shadow: none; }
.zs-pop--lost { color: #ffe1e8; font-size: .9rem; }
@keyframes zs-float { from { opacity: 0; translate: 0 10px; scale: .6; } 20% { opacity: 1; scale: 1.1; } 70% { opacity: 1; } to { opacity: 0; translate: 0 -46px; scale: 1; } }
.zs-tip { position: absolute; left: 50%; top: 28%; margin: 0; transform: translateX(-50%); padding: 8px 18px; background: #1560bd; color: #fff; font: 800 1.2rem/1.2 var(--pg-serif); border-radius: 999px; box-shadow: 4px 4px 0 #0b1b2b; pointer-events: none; white-space: nowrap; animation: zs-tip 1.2s var(--pg-ease) both; }
@keyframes zs-tip { from { opacity: 0; transform: translate(-50%, 10px); } 20%, 80% { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; } }

.zs-layer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 12px; padding: 20px; text-align: center; background: rgba(10, 40, 110, .45); color: #fff; overflow-y: auto; }
.zs-layer[hidden] { display: none; }
.zs-layer--menu { background: linear-gradient(rgba(10, 40, 110, .1), rgba(10, 40, 110, .5)); }
.zs-layer--count { background: transparent; }
.zs-layer--result { background: radial-gradient(circle at 50% 25%, rgba(255, 207, 74, .55), rgba(21, 96, 189, .85) 55%, rgba(20, 20, 80, .92)); }
.zs-layer--plain { background: #1560bd; margin: 0; }
.zs-layer__title { margin: 0; color: #fff; font-size: clamp(1.6rem, 4vw, 2.6rem); text-shadow: 0 3px 0 #0e3e7a, 0 8px 20px rgba(0, 0, 0, .25); }
.zs-layer__text { margin: 0; max-width: 30em; color: #eef6ff; }
.zs-layer__hint { margin: 0; font-size: .88rem; color: #fff; background: rgba(10, 40, 110, .55); padding: 4px 12px; border-radius: 999px; }
.zs-layer__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0; }
.zs-layer .pg-btn--line { background: #fff; }
.zs-go { min-height: 60px; padding-inline: 2.4em; font-size: 1.25rem; background: #ffcf4a; border-color: #0b1b2b; color: #0b1b2b; box-shadow: 5px 5px 0 #0b1b2b; animation: zs-bounce 1.4s ease-in-out infinite; }
.zs-go:hover { background: #ffd95e; color: #0b1b2b; border-color: #0b1b2b; }
@keyframes zs-bounce { 50% { transform: skewX(-12deg) translateY(-4px); } }
.zs-count { margin: 0; font: 800 clamp(3.4rem, 11vw, 6.4rem)/1 var(--pg-serif); color: #fff; text-shadow: 0 5px 0 #1560bd, 0 12px 30px rgba(0, 0, 0, .3); animation: zs-pulse .45s ease-in-out infinite alternate; }
@keyframes zs-pulse { to { transform: scale(1.1) rotate(-2deg); } }

.zs-recs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.zs-recs li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 16px; background: rgba(255, 255, 255, .95); color: var(--pg-ink); }
.zs-recs__k { font-size: .85rem; color: var(--pg-soft); }
.zs-recs strong { font: 800 1.15rem/1 var(--pg-serif); font-variant-numeric: lining-nums tabular-nums; }
.zs-recs--page { justify-content: flex-start; margin: 10px 0; }
.zs-recs--page li { background: #fff; box-shadow: 0 10px 24px -16px rgba(14, 62, 122, .5); }
.zs-recs--result li { padding: 5px 10px; background: rgba(255, 255, 255, .18); color: #fff; }
.zs-recs--result .zs-recs__k { color: #dce9ff; }

.zs-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 16px; background: #ff6f91; color: #fff; font-weight: 800; transform: skewX(-12deg) rotate(-3deg); box-shadow: 4px 4px 0 #0e3e7a; animation: zs-pop-in .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes zs-pop-in { from { transform: skewX(-12deg) scale(.3); opacity: 0; } }
.zs-tally { display: grid; grid-template-columns: repeat(5, auto); gap: 4px 20px; margin: 0; align-items: end; }
.zs-tally div { display: grid; justify-items: center; }
.zs-tally dt { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: #dce9ff; }
.zs-tally dd { margin: 0; font: 800 1.3rem/1.2 var(--pg-serif); font-variant-numeric: lining-nums tabular-nums; }
.zs-tally__main dd { font-size: 2.2rem; color: #ffd84a; text-shadow: 0 3px 0 #0e3e7a; }

/* Faixa quente para a secção do céu */
.pg-band--sun { background: #fff4df; }
.zs-dawn { background: #7cc4ff; }
.zs-dawn .pg-dawn__title { color: #0e3e7a; text-shadow: 0 5px 0 #ffcf4a, 0 12px 26px rgba(255, 255, 255, .6); }
.zs-dawn .pg-dawn__sub { color: #0b1b2b; text-shadow: none; font-weight: 600; }
.zs-dawn .pg-dawn__lead { color: #0b1b2b; }
.zs-dawn .pg-dawn__eyebrow { color: #0b1b2b; background: #ffcf4a; display: inline-block; padding: 4px 12px; border-radius: 999px; }
.zs-hero__zeus { width: clamp(140px, 18vw, 230px); }
.zs-pace { margin-top: 28px; }

@media (max-width: 600px) {
  .zs-hud { gap: 5px 6px; padding: 8px; }
  .zs-hud__score strong { font-size: 1.2rem; padding: 1px 10px; }
  .zs-hud__chip { padding: 3px 9px 3px 6px; font-size: .85rem; }
  .zs-hud__chip .zs-ico { width: 18px; height: 18px; }
  .zs-hud__streak { font-size: .78rem; padding: 3px 9px; }
  .zs-tool { width: 38px; height: 38px; }
  .zs-layer { gap: 6px; padding: 10px; }
  .zs-layer__title { font-size: 1.25rem; }
  .zs-layer__text, .zs-layer__hint, .zs-recs--result { display: none; }
  .zs-recs { gap: 5px; }
  .zs-recs li { padding: 5px 9px; gap: 5px; }
  .zs-recs__k { font-size: .72rem; }
  .zs-recs strong { font-size: .95rem; }
  .zs-recs--menu .zs-ico { width: 18px; height: 18px; }
  .zs-go { min-height: 48px; font-size: 1.05rem; }
  .zs-badge { padding: 3px 10px; font-size: .8rem; }
  .zs-tally { grid-template-columns: repeat(4, auto); gap: 2px 12px; }
  .zs-tally div:last-child { display: none; }
  .zs-tally dt { font-size: .7rem; }
  .zs-tally dt .zs-ico { width: 14px; height: 14px; }
  .zs-tally dd { font-size: 1rem; }
  .zs-tally__main dd { font-size: 1.4rem; }
  .zs-layer__acts .pg-btn { min-height: 42px; padding: .4em 1em; font-size: .88rem; }
  .zs-pop { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .zs-count, .zs-go { animation: none; }
}
.zs-stage ~ .pg-arena__below { margin-top: clamp(40px, 6vw, 64px); }

/* Nova etapa do céu */
.zs-stage-burst { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; pointer-events: none; text-align: center; }
.zs-stage-burst[hidden] { display: none; }
.zs-stage-burst p { margin: 0; }
.zs-stage-burst__big { padding: 10px 26px; border-radius: 999px; background: #ffcf4a; color: #0b1b2b; font: 800 clamp(1.6rem, 5vw, 3rem)/1.1 var(--pg-serif); box-shadow: 0 0 0 5px #fff, 0 0 40px 12px rgba(255, 220, 90, .9), 6px 8px 0 5px #0e3e7a; white-space: nowrap; }
.zs-stage-burst__name { padding: 4px 14px; border-radius: 999px; background: rgba(10, 40, 110, .75); color: #fff; font-weight: 700; }
.zs-stage-burst--go .zs-stage-burst__big { animation: zs-stage-in 1.9s cubic-bezier(.2, 1.4, .4, 1) both; }
.zs-stage-burst--go .zs-stage-burst__name { animation: zs-stage-name 1.9s ease both; }
@keyframes zs-stage-in { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 18% { transform: scale(1.18) rotate(3deg); opacity: 1; } 30% { transform: scale(1) rotate(-2deg); } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1) translateY(-30px); opacity: 0; } }
@keyframes zs-stage-name { 0%, 15% { opacity: 0; transform: translateY(10px); } 30%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.zs-stagepts { margin: 0; padding: 4px 14px; border-radius: 999px; background: #ffcf4a; color: #2b1c00; font-weight: 800; }
@media (max-width: 600px) { .zs-stagepts { font-size: .78rem; padding: 2px 10px; } .zs-stage-burst__name { font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) { .zs-stage-burst--go .zs-stage-burst__big, .zs-stage-burst--go .zs-stage-burst__name { animation: none; } }
@media (max-width: 600px) { .zs-stage-burst { top: 30%; } .zs-stage-burst__big { font-size: 1.3rem; padding: 6px 16px; box-shadow: 0 0 0 3px #fff, 0 0 24px 8px rgba(255, 220, 90, .9), 4px 5px 0 3px #0e3e7a; } }