/* Tela de jogar no visual do menu e do Arcade (estilo Persona): ocupa a janela inteira (sem a barra lateral e sem o
   painel da direita), letras condensadas em itálico, recortes inclinados, magenta e branco.
   Vale com body.jg #view-jogar (game.js liga ao abrir a tela de jogar). As telas por cima do palco ficam marcadas em
   .stage[data-ov] (start, pause, results, loading, empty; "none" durante a partida). */
body.jg {
  --jg-accent: #ff2d8a; --jg-accent-rgb: 255, 45, 138; --jg-accent2: #9b4dff;
  --jg-ink: #14040e;
  --jg-font: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --jg-easy: #6ee7a0; --jg-normal: #56d4f5; --jg-hard: #ff4d6d; --jg-nightmare: #b56cff;
  background: #07020a;
}
body.jg .stage { --accent: var(--jg-accent); --accent-rgb: var(--jg-accent-rgb); border: 0; border-radius: 0; box-shadow: none; font-family: var(--jg-font); }

/* ---------- capa borrada (tela inicial e resultado) ---------- */
.jg-bg { display: none; }
body.jg .jg-bg {
  display: block; position: absolute; inset: -40px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.45s;
  background: #07020a center / cover no-repeat; filter: blur(30px) saturate(1.25) brightness(0.42);
}
body.jg .stage:is([data-ov="start"], [data-ov="results"], [data-ov="empty"]) .jg-bg { opacity: 1; }
body.jg #view-jogar .overlay { background: linear-gradient(100deg, rgba(7, 2, 10, 0.82) 0%, rgba(7, 2, 10, 0.55) 55%, rgba(7, 2, 10, 0.3) 100%); padding: 96px 4vw 4vh; }
body.jg #view-jogar #ov-pause { background: rgba(7, 2, 10, 0.72); }
/* faixas diagonais bem leves no canto, como no Arcade */
body.jg #view-jogar .overlay::before {
  content: ''; position: absolute; right: 0; bottom: 0; width: 46vw; height: 60vh; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 18px);
  -webkit-mask-image: linear-gradient(315deg, #000, transparent 70%); mask-image: linear-gradient(315deg, #000, transparent 70%);
}
body.jg #view-jogar .ov-card { position: relative; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; text-align: left; }

/* ---------- barra de cima: Voltar e o som (some durante a partida) ---------- */
.jg-top { display: none; }
body.jg .jg-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: 14px;
  padding: 3vh 4vw 0; pointer-events: none;
}
body.jg .jg-top > * { pointer-events: auto; }
body.jg .stage:is([data-ov="none"], [data-ov="loading"]) .jg-top { display: none; }
body.jg .stage[data-ov="pause"] .jg-back { visibility: hidden; } /* na pausa, quem sai é "Sair da música" */
.jg-back {
  padding: 6px 16px; border: 0; cursor: pointer; background: var(--jg-accent); color: #fff;
  font: italic 900 18px var(--jg-font); text-transform: uppercase; letter-spacing: 0.04em; transform: skewX(-10deg);
}
.jg-back:hover, .jg-back:focus-visible { background: #fff; color: var(--jg-ink); outline: none; }
body.jg .jg-sound { margin-left: auto; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 0; }
body.jg .jg-sound .np-volume, body.jg .jg-sound .np-switch {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.55); background: rgba(10, 0, 18, 0.55); transform: skewX(-10deg);
  font: italic 800 15px var(--jg-font); text-transform: uppercase; letter-spacing: 0.04em; color: #fff;
}
body.jg .jg-sound .np-switch { padding: 0 12px; border-top: 2px solid rgba(255, 255, 255, 0.55); }
body.jg .jg-sound .np-switch[hidden] { display: none; }
body.jg .jg-sound .np-volume:hover, body.jg .jg-sound .np-switch:hover { border-color: var(--jg-accent); }
body.jg .jg-sound .np-volume > *, body.jg .jg-sound .np-switch > * { transform: skewX(10deg); }
body.jg .jg-sound .np-volume button { width: 30px; height: 30px; border-radius: 0; color: #fff; }
body.jg .jg-sound .np-volume input { width: 110px; accent-color: var(--jg-accent); }
body.jg .jg-sound .np-volume output { min-width: 40px; font: italic 800 16px var(--jg-font); color: rgba(255, 255, 255, 0.8); }
body.jg .jg-sound .np-switch svg { width: 18px; height: 18px; }
body.jg .jg-sound .np-switch i { transform: none; }

/* ---------- HUD ---------- */
body.jg #view-jogar .hud { text-shadow: none; font-family: var(--jg-font); }
body.jg #view-jogar .hud-pause {
  top: 3vh; left: 3vw; width: 48px; height: 48px; padding: 0; gap: 6px; align-items: center; justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.7); background: rgba(10, 0, 18, 0.6); transform: skewX(-10deg);
}
body.jg #view-jogar .hud-pause:hover { background: var(--jg-accent); border-color: var(--jg-accent); }
body.jg #view-jogar .hud-pause i { width: 6px; height: 20px; border-radius: 0; box-shadow: none; }
body.jg #view-jogar .hud-combo { top: calc(3vh + 66px); left: 3vw; align-items: flex-start; }
body.jg #view-jogar .hud-score { top: 3vh; right: 3vw; }
body.jg #view-jogar .hud-combo span, body.jg #view-jogar .hud-score span {
  padding: 1px 12px; font-size: 16px; font-weight: 900; font-style: italic; letter-spacing: 0.12em;
  color: #fff; background: var(--jg-accent); transform: skewX(-12deg);
}
body.jg #view-jogar .hud-combo strong {
  font-size: clamp(54px, 7vh, 84px); font-weight: 900; font-style: italic; line-height: 0.95; margin-top: 2px;
  text-shadow: 4px 4px 0 var(--jg-accent), 0 0 24px rgba(0, 0, 0, 0.6);
}
body.jg #view-jogar .hud-score strong {
  font-size: clamp(34px, 4.6vh, 50px); font-weight: 900; font-style: italic; line-height: 1; margin-top: 4px; letter-spacing: 0.02em;
  text-shadow: 3px 3px 0 var(--jg-accent), 0 0 20px rgba(0, 0, 0, 0.6);
}
body.jg #view-jogar .hud-progress {
  top: calc(3vh + 6px); width: min(34%, 340px); height: 8px; border-radius: 0; transform: translateX(-50%) skewX(-20deg);
  background: rgba(255, 255, 255, 0.16);
}
body.jg #view-jogar .hud-progress i { border-radius: 0; background: #fff; box-shadow: 4px 0 0 var(--jg-accent); }
#hud-title { display: none; }
body.jg #hud-title {
  display: block; position: absolute; left: 0; right: 0; top: 14px; transform: skewX(20deg); text-align: center;
  font-size: 17px; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* na pausa o HUD sai de cena (a barra de cima com o som fica no lugar do placar) */
body.jg .stage[data-ov="pause"] .hud { opacity: 0; }
/* contagem para voltar da pausa */
body.jg #view-jogar .countdown {
  font-family: var(--jg-font); font-weight: 900; font-style: italic; font-size: clamp(140px, 26vh, 260px);
  background: rgba(7, 2, 10, 0.45); text-shadow: 10px 10px 0 var(--jg-accent), 0 0 40px rgba(0, 0, 0, 0.5);
}

/* ---------- tela inicial da música ---------- */
body.jg #view-jogar .start-card {
  width: min(1240px, 100%); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4vw; align-items: center;
}
body.jg #view-jogar .start-art { position: relative; animation: jg-in-left 0.5s cubic-bezier(0.15, 1.1, 0.3, 1) both; }
body.jg #view-jogar .start-art::after { /* sombra magenta deslocada, recortada igual à capa */
  content: ''; position: absolute; inset: 0; z-index: -1; translate: 14px 14px; background: var(--jg-accent);
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
body.jg #view-jogar .start-cover {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; border-radius: 0; object-fit: cover; background: #1a0a22;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); box-shadow: none;
}
body.jg #view-jogar .start-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; animation: jg-in-right 0.5s 0.05s cubic-bezier(0.15, 1.1, 0.3, 1) both; }
body.jg #view-jogar .start-info > * { margin: 0; }
body.jg #view-jogar .start-card h2 {
  order: 1; max-width: 100%; font-size: clamp(42px, 6.4vh, 76px); font-weight: 900; font-style: italic; line-height: 0.95;
  text-transform: uppercase; letter-spacing: 0.005em; text-shadow: 4px 4px 0 var(--jg-accent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.jg #view-jogar .start-card #start-artist { order: 2; margin-top: 6px; font-size: 26px; font-weight: 700; font-style: italic; color: rgba(255, 255, 255, 0.78); }
body.jg #view-jogar .start-card .start-by { order: 3; margin-top: 2px; font-size: 17px; font-style: italic; color: rgba(255, 255, 255, 0.55); }
body.jg #view-jogar .start-by a { color: #fff; }
body.jg #view-jogar .start-card .chips { order: 0; justify-content: flex-start; margin: 0 0 12px; gap: 6px; }
body.jg #view-jogar .chip {
  padding: 2px 12px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 0; background: rgba(10, 0, 18, 0.5); color: #fff;
  font: italic 800 17px var(--jg-font); letter-spacing: 0.04em; text-transform: uppercase; transform: skewX(-10deg);
}

body.jg #view-jogar .chip.ghost { color: rgba(255, 255, 255, 0.85); }
body.jg #view-jogar .chip.hidden { display: none; }
body.jg #view-jogar .start-card .level-pick { order: 4; display: flex; width: 100%; gap: 8px; margin: 22px 0 0; padding: 0; border: 0; }
body.jg #view-jogar .start-card .level-pick.hidden { display: none; }
body.jg #view-jogar .level-pick button {
  position: relative; flex: 1; padding: 10px 14px 9px; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 0; background: rgba(10, 0, 18, 0.55);
  color: #fff; text-align: left; font: italic 900 24px var(--jg-font); text-transform: uppercase; letter-spacing: 0.02em; transform: skewX(-10deg); box-shadow: none;
}
body.jg #view-jogar .level-pick button::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--lv); }
body.jg #view-jogar .level-pick [data-level="facil"] { --lv: var(--jg-easy); }
body.jg #view-jogar .level-pick [data-level="medio"] { --lv: var(--jg-normal); }
body.jg #view-jogar .level-pick [data-level="dificil"] { --lv: var(--jg-hard); }
body.jg #view-jogar .level-pick [data-level="pesadelo"] { --lv: var(--jg-nightmare); }
body.jg #view-jogar .level-pick button:hover { border-color: var(--lv); color: #fff; }
body.jg #view-jogar .level-pick button.active { background: var(--lv); border-color: var(--lv); color: var(--jg-ink); box-shadow: none; }
body.jg #view-jogar .level-pick button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* efeito de personagem (historia.js renderStartFx): dificuldade extra, não muda a pontuação */
body.jg #view-jogar .start-fx { order: 4; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; width: 100%; margin: 12px 0 0; font: italic 900 15px var(--jg-font); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
body.jg #view-jogar .start-fx[hidden] { display: none; }
body.jg #view-jogar .start-fxbtns { display: flex; flex-wrap: wrap; gap: 6px; }
body.jg #view-jogar .start-fxbtns button { padding: 5px 14px; border: 2px solid var(--fx); border-radius: 0; background: rgba(10, 0, 18, 0.55); color: #fff; cursor: pointer; font: italic 900 16px var(--jg-font); text-transform: uppercase; transform: skewX(-10deg); box-shadow: none; }
body.jg #view-jogar .start-fxbtns button.on { background: var(--fx); color: #0a0012; }
body.jg #view-jogar .start-fxbtns button:disabled { cursor: default; opacity: 1; } /* fase da história: o efeito dela, fixo */
body.jg #view-jogar .start-fxbtns button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* o raio: a versão forte do efeito (5 corações de afinidade) */
body.jg #view-jogar .start-fxbtns .start-fxforte { display: inline-flex; align-items: center; gap: 6px; border-color: #ffcf6e; color: #ffcf6e; }
body.jg #view-jogar .start-fxbtns .start-fxforte svg { width: 16px; height: 16px; fill: currentColor; }
body.jg #view-jogar .start-fxbtns .start-fxforte.on { background: #ffcf6e; color: #0a0012; }
body.jg #view-jogar .start-board {
  order: 5; width: auto; max-width: 100%; margin: 14px 0 0; padding: 6px 14px; justify-content: flex-start; gap: 10px;
  border: 0; border-left: 4px solid #ffd166; border-radius: 0; background: rgba(255, 255, 255, 0.06); color: #fff;
  font: italic 700 18px var(--jg-font); transform: skewX(-10deg);
}
body.jg #view-jogar .start-board > * { transform: skewX(10deg); }
body.jg #view-jogar .start-board:hover, body.jg #view-jogar .start-board:focus-visible { background: rgba(255, 209, 102, 0.16); outline: none; }
body.jg #view-jogar .start-daily {
  order: 6; max-width: 100%; margin: 14px 0 0; padding: 6px 14px; border: 0; border-left: 4px solid #ffd166; border-radius: 0;
  background: rgba(255, 179, 92, 0.12); font: italic 700 17px var(--jg-font); line-height: 1.25;
}
body.jg #view-jogar #btn-start {
  order: 7; width: min(520px, 100%); margin: 26px 14px 0 0; padding: 16px 40px; border: 0; border-radius: 0;
  background: #fff; color: var(--jg-ink); font: italic 900 34px var(--jg-font); text-transform: uppercase; letter-spacing: 0.03em;
  transform: skewX(-10deg); box-shadow: 9px 9px 0 var(--jg-accent); transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
body.jg #view-jogar #btn-start:hover:not(:disabled), body.jg #view-jogar #btn-start:focus-visible { background: var(--jg-accent); color: #fff; box-shadow: 9px 9px 0 #fff; outline: none; filter: none; }
body.jg #view-jogar #btn-start.preparing { opacity: 0.6; }
body.jg #view-jogar .start-card .hint { order: 8; margin-top: 14px; font: italic 700 17px var(--jg-font); color: rgba(255, 255, 255, 0.6); }
body.jg #view-jogar .hint kbd { border-radius: 0; font-family: var(--jg-font); font-weight: 800; font-size: 14px; }
body.jg #view-jogar .start-card .yt-inline { order: 9; margin-top: 12px; }
@keyframes jg-in-left { from { opacity: 0; translate: -40px 0; } }
@keyframes jg-in-right { from { opacity: 0; translate: 40px 0; } }

/* ---------- pausa: itens grandes como no menu, o escolhido com a faixa branca ---------- */
body.jg #view-jogar .pause-card { width: min(560px, 100%); }
body.jg #view-jogar .pause-card h2 {
  margin: 0 0 26px; font-size: clamp(64px, 11vh, 120px); font-weight: 900; font-style: italic; line-height: 0.9; text-transform: uppercase;
  text-shadow: 6px 6px 0 var(--jg-accent); animation: jg-in-left 0.35s cubic-bezier(0.15, 1.1, 0.3, 1) both;
}
body.jg #view-jogar #pause-items { gap: 6px; align-items: flex-start; }
/* volume na pausa (o mesmo das Configurações) */
.pause-volume { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.pause-volume label { font-weight: 800; font-style: italic; text-transform: uppercase; color: rgba(255, 222, 242, 0.86); }
.pause-volume input { flex: 1; max-width: 260px; accent-color: var(--jg-accent, var(--accent)); }
.pause-volume output { min-width: 3.5em; font-weight: 800; color: #fff; }
body.jg #view-jogar #pause-items .btn {
  position: relative; z-index: 0; width: auto; padding: 4px 30px 4px 18px; border: 0; border-radius: 0; background: none; color: rgba(255, 222, 242, 0.86);
  font: italic 900 clamp(34px, 5.2vh, 52px) var(--jg-font); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.01em; text-align: left;
  transition: color 0.12s, translate 0.15s; animation: jg-in-left 0.35s cubic-bezier(0.15, 1.1, 0.3, 1) both;
}
body.jg #view-jogar #pause-items .btn:nth-child(2) { animation-delay: 0.04s; } body.jg #view-jogar #pause-items .btn:nth-child(3) { animation-delay: 0.08s; }
body.jg #view-jogar #pause-items .btn::before {
  content: ''; position: absolute; inset: 2px -6px 2px -10px; z-index: -1; background: #fff; transform: skewX(-14deg) scaleX(0); transform-origin: left;
  box-shadow: 7px 7px 0 var(--jg-accent); transition: transform 0.16s cubic-bezier(0.2, 1, 0.3, 1);
}
body.jg #view-jogar #pause-items .btn:hover, body.jg #view-jogar #pause-items .btn:focus-visible { color: var(--jg-ink); translate: 10px 0; outline: none; background: none; filter: none; }
body.jg #view-jogar #pause-items .btn:hover::before, body.jg #view-jogar #pause-items .btn:focus-visible::before { transform: skewX(-14deg) scaleX(1); }
body.jg #view-jogar #pause-hint { margin-top: 22px; font: italic 700 18px var(--jg-font); color: rgba(255, 255, 255, 0.55); }

/* ---------- resultado: a nota enorme à esquerda, os números em faixas à direita ---------- */
body.jg #view-jogar .results { width: min(1240px, 100%); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4vw; align-items: center; }
body.jg #view-jogar .results > div > p { margin: 0; }
body.jg #view-jogar .res-left { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; animation: jg-in-left 0.5s cubic-bezier(0.15, 1.1, 0.3, 1) both; }
body.jg #view-jogar #res-title {
  max-width: 100%; padding: 4px 18px; background: #fff; color: var(--jg-ink); font: italic 900 24px var(--jg-font); text-transform: uppercase;
  letter-spacing: 0.02em; transform: skewX(-10deg); box-shadow: 6px 6px 0 var(--jg-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.jg #view-jogar .rank {
  margin: 2vh 0 0 -0.04em; font: italic 900 clamp(170px, 34vh, 330px) var(--jg-font); line-height: 0.85; letter-spacing: -0.03em;
  background: none; color: #fff; -webkit-text-fill-color: #fff; filter: none; text-shadow: 12px 12px 0 var(--jg-accent);
  animation: jg-rank 0.6s 0.15s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes jg-rank { from { opacity: 0; scale: 1.6; } }
body.jg #view-jogar .res-badges { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; margin-top: 1.4vh; }
body.jg #view-jogar .badge {
  margin: 0 !important; padding: 3px 14px; border-radius: 0; background: var(--jg-accent); color: #fff;
  font: italic 900 20px var(--jg-font); text-transform: uppercase; letter-spacing: 0.04em; transform: skewX(-10deg);
}
body.jg #view-jogar .badge.hidden { display: none; }
body.jg #view-jogar #res-fc { background: #ffd166; color: var(--jg-ink); }
body.jg #view-jogar .res-score {
  margin-top: 1.4vh; font: italic 900 clamp(52px, 8vh, 88px) var(--jg-font); line-height: 1; letter-spacing: 0.01em;
  text-shadow: 5px 5px 0 var(--jg-accent);
}
body.jg #view-jogar .res-right { display: flex; flex-direction: column; min-width: 0; animation: jg-in-right 0.5s 0.1s cubic-bezier(0.15, 1.1, 0.3, 1) both; }
body.jg #view-jogar .res-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
body.jg #view-jogar .res-grid div {
  position: relative; padding: 8px 14px 6px 16px; border-radius: 0; background: rgba(10, 0, 18, 0.6); border: 2px solid rgba(255, 255, 255, 0.18);
  transform: skewX(-10deg);
}
body.jg #view-jogar .res-grid div:nth-child(-n+2) { grid-column: span 2; }
body.jg #view-jogar .res-grid div::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c, #fff); }
body.jg #view-jogar .res-grid div:nth-child(1) { --c: var(--jg-accent); } body.jg #view-jogar .res-grid div:nth-child(2) { --c: var(--jg-accent2); }
body.jg #view-jogar .res-grid div:nth-child(3) { --c: var(--green); } body.jg #view-jogar .res-grid div:nth-child(4) { --c: var(--cyan); }
body.jg #view-jogar .res-grid div:nth-child(5) { --c: var(--orange); } body.jg #view-jogar .res-grid div:nth-child(6) { --c: var(--red); }
body.jg #view-jogar .res-grid dt { font: italic 800 16px var(--jg-font); text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.65); }
body.jg #view-jogar .res-grid dd { margin: 0; font: italic 900 clamp(30px, 4.4vh, 44px) var(--jg-font); line-height: 1.05; }
body.jg #view-jogar .res-ach { gap: 6px; margin: 14px 0 0; }
body.jg #view-jogar .res-ach li { border-radius: 0; border: 0; border-left: 4px solid #ffd166; background: rgba(255, 209, 102, 0.1); transform: skewX(-10deg); }
body.jg #view-jogar .res-ach strong { font: italic 900 19px var(--jg-font); text-transform: uppercase; letter-spacing: 0.02em; }
body.jg #view-jogar .res-ach span { font: italic 600 16px var(--jg-font); color: rgba(255, 255, 255, 0.7); }
body.jg #view-jogar .res-pl { margin: 12px 0 0 !important; font: italic 700 18px var(--jg-font); color: rgba(255, 255, 255, 0.75); }
body.jg #view-jogar .res-pl .link-btn { font: inherit; color: #fff; }
body.jg #view-jogar .results .row-buttons { justify-content: flex-start; gap: 14px; margin-top: 22px; padding-right: 10px; }
body.jg #view-jogar .results .row-buttons .btn {
  padding: 10px 24px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 0; background: rgba(10, 0, 18, 0.6); color: #fff;
  font: italic 900 24px var(--jg-font); text-transform: uppercase; letter-spacing: 0.03em; transform: skewX(-10deg);
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
body.jg #view-jogar .results .row-buttons .btn.primary { background: #fff; border-color: #fff; color: var(--jg-ink); box-shadow: 7px 7px 0 var(--jg-accent); }
body.jg #view-jogar .results .row-buttons .btn:hover:not(:disabled), body.jg #view-jogar .results .row-buttons .btn:focus-visible {
  background: var(--jg-accent); border-color: var(--jg-accent); color: #fff; outline: none; filter: none; transform: skewX(-10deg);
}
body.jg #view-jogar .results .row-buttons .btn.primary:hover:not(:disabled), body.jg #view-jogar .results .row-buttons .btn.primary:focus-visible { box-shadow: 7px 7px 0 #fff; }
body.jg #view-jogar .results .row-buttons .btn svg { width: 20px; height: 20px; }
body.jg #view-jogar .results .row-buttons .btn.icon-only { padding-left: 16px; padding-right: 16px; }

/* ---------- carregando e sem música ---------- */
body.jg #view-jogar #ov-loading .ov-card { text-align: center; }
body.jg #view-jogar .spinner { width: 54px; height: 54px; border: 0; border-radius: 0; background: var(--jg-accent); animation: jg-spin 0.9s cubic-bezier(0.6, 0, 0.4, 1) infinite; box-shadow: 8px 8px 0 #fff; }
@keyframes jg-spin { to { transform: rotate(180deg); } }
body.jg #view-jogar #loading-text { margin-top: 26px; font: italic 900 26px var(--jg-font); text-transform: uppercase; letter-spacing: 0.04em; }
body.jg #view-jogar .overlay .empty-state h2 { font: italic 900 44px var(--jg-font); text-transform: uppercase; text-shadow: 4px 4px 0 var(--jg-accent); }
body.jg #view-jogar .empty-art { border-radius: 0; transform: skewX(-10deg); background: var(--jg-accent); color: #fff; }
body.jg #view-jogar .empty-state .btn {
  border: 0; border-radius: 0; background: #fff; color: var(--jg-ink); font: italic 900 26px var(--jg-font); text-transform: uppercase;
  transform: skewX(-10deg); box-shadow: 7px 7px 0 var(--jg-accent);
}
body.jg #view-jogar .empty-state .btn:hover { background: var(--jg-accent); color: #fff; filter: none; }

/* ---------- tablet: uma coluna, a capa menor em cima ---------- */
@media (max-width: 1060px), (max-aspect-ratio: 1/1) {
  body.jg #view-jogar .overlay { padding: 92px 5vw 4vh; }
  body.jg #view-jogar .start-card, body.jg #view-jogar .results { grid-template-columns: minmax(0, 1fr); gap: 3vh; }
  body.jg #view-jogar .start-art { width: min(560px, 100%); }
  body.jg #view-jogar .res-left { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'title title' 'rank badges' 'rank score'; column-gap: 26px; align-items: end; }
  body.jg #view-jogar #res-title { grid-area: title; justify-self: start; }
  body.jg #view-jogar .rank { grid-area: rank; font-size: clamp(130px, 22vh, 220px); }
  body.jg #view-jogar .res-badges { grid-area: badges; }
  body.jg #view-jogar .res-score { grid-area: score; }
}
/* ---------- celular ---------- */
@media (max-width: 700px) {
  body.jg .jg-top { padding: 12px 14px 0; gap: 8px; }
  body.jg .jg-sound .np-volume input { width: 70px; }
  body.jg .jg-sound .np-switch span, body.jg .jg-sound .np-volume output { display: none; }
  body.jg #view-jogar .overlay { padding: 70px 18px 24px; }
  body.jg #view-jogar .start-card h2 { font-size: 40px; }
  body.jg #view-jogar .start-card #start-artist { font-size: 21px; }
  body.jg #view-jogar .level-pick button { font-size: 19px; padding: 8px 10px; }
  body.jg #view-jogar #btn-start { width: calc(100% - 10px); font-size: 28px; padding: 13px 20px; }
  body.jg #view-jogar .pause-card h2 { font-size: 64px; }
  body.jg #view-jogar .res-left { column-gap: 34px; }
  body.jg #view-jogar .rank { font-size: 120px; text-shadow: 8px 8px 0 var(--jg-accent); }
  body.jg #view-jogar .res-score { font-size: 42px; }
  body.jg #view-jogar .res-grid dd { font-size: 28px; }
  body.jg #view-jogar .results .row-buttons .btn { font-size: 20px; padding: 8px 16px; }
  body.jg #view-jogar .hud-pause { top: 12px; left: 12px; width: 42px; height: 42px; }
  body.jg #view-jogar .hud-combo { top: 66px; left: 14px; }
  body.jg #view-jogar .hud-combo strong { font-size: 50px; }
  body.jg #view-jogar .hud-score { top: 12px; right: 14px; }
  body.jg #view-jogar .hud-score strong { font-size: 30px; }
  body.jg #view-jogar .hud-progress { top: 20px; width: 30%; }
  body.jg #hud-title { display: none; }
}
/* tela de toque: sem as dicas de teclado */
@media (hover: none) and (pointer: coarse) {
  body.jg #view-jogar .start-card .hint, body.jg #view-jogar #pause-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.jg #view-jogar .start-art, body.jg #view-jogar .start-info, body.jg #view-jogar .res-left, body.jg #view-jogar .res-right, body.jg #view-jogar .rank, body.jg #view-jogar .pause-card h2, body.jg #view-jogar #pause-items .btn { animation: none; }
}

/* a barra de cima já tem o volume (e aparece na pausa): o do cartão da pausa repetia */
body.jg #view-jogar .pause-card .pause-volume { display: none; }
/* tela deitada baixa (celular virado, janela pequena): a pausa cabe na altura */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  body.jg #view-jogar .pause-card h2 { font-size: 40px; margin-bottom: 10px; }
  body.jg #view-jogar #pause-items { gap: 2px; }
  body.jg #view-jogar #pause-items .btn { font-size: 26px; }
  body.jg #view-jogar #pause-hint { display: none; }
}
/* tela estreita: as quatro dificuldades em duas linhas de duas (numa linha só, passavam da largura e a tela rolava de lado) */
@media (max-width: 520px) {
  body.jg #view-jogar .start-card .level-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* tela estreita: o som (volume, vídeo, fundo sólido) quebra em duas linhas à direita (numa só, o último saía da tela),
   e o Voltar não se espreme */
@media (max-width: 520px) {
  body.jg .jg-top { align-items: flex-start; }
  body.jg .jg-back { flex: none; white-space: nowrap; }
  body.jg .jg-sound { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  body.jg #view-jogar .overlay { padding-top: 116px; }
}
/* tela apertada (celular pequeno em pé, celular deitado): sem a imagem da fase, que empurrava o Jogar para fora da tela */
@media (max-aspect-ratio: 4/5) and (max-height: 820px), (max-height: 520px) and (min-aspect-ratio: 1/1) {
  body.jg #view-jogar .start-art { display: none; }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  body.jg .jg-top { padding: 10px 4vw 0; gap: 8px; }
  body.jg .jg-back { flex: none; white-space: nowrap; font-size: 15px; }
  body.jg .jg-sound .np-volume, body.jg .jg-sound .np-switch { height: 34px; }
  body.jg .jg-sound .np-switch span, body.jg .jg-sound .np-volume output { display: none; }
  body.jg .jg-sound .np-volume input { width: 80px; }
  body.jg #view-jogar .overlay { padding: 58px 4vw 12px; }
  body.jg #view-jogar .start-card h2 { font-size: 30px; }
  body.jg #view-jogar .start-card #start-artist { font-size: 17px; }
  body.jg #view-jogar .start-card .level-pick { margin-top: 10px; }
  body.jg #view-jogar .level-pick button { font-size: 16px; padding: 6px 10px; }
  body.jg #view-jogar #btn-start { font-size: 22px; padding: 9px 20px; }
}

/* modo leve (game.js: Perf): a capa atrás da tela inicial e do resultado sem desfoque */
body.leve.jg .jg-bg { filter: saturate(1.2) brightness(0.3); }