:root {
  --dvm-game-yellow: #f7c415;
  --dvm-game-black: #111;
  --dvm-game-white: #fff;
}

/* Shifts aplicados via inline style em JS (open/close).
   Apenas define transition + opacity + visibility aqui. */
.dvm-game-shift-top {
  opacity: 0 !important;
  visibility: hidden !important;
  transition:
    transform .62s cubic-bezier(.2,.82,.2,1),
    opacity .42s ease .04s,
    visibility 0s linear .58s !important;
  pointer-events: none !important;
}
.dvm-game-shift-bottom {
  opacity: 0 !important;
  visibility: hidden !important;
  transition:
    transform .66s cubic-bezier(.2,.82,.2,1),
    opacity .5s ease .08s,
    visibility 0s linear .62s !important;
  pointer-events: none !important;
}
@media (max-width: 960px) {
  .dvm-game-shift-top {
    transition-duration: .6s, .6s, 0s !important;
    transition-delay: 0s, 0s, .56s !important;
  }
  .dvm-game-shift-bottom {
    transition-duration: .64s, .6s, 0s !important;
    transition-delay: 0s, .06s, .6s !important;
  }
}

/* Palco transparente */
.dvm-game-fixed-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 11;
  pointer-events: none;
  box-sizing: border-box;
}
.dvm-game-fixed-layer:has(.is-open) {
  pointer-events: auto;
}
.dvm-game-stage {
  position:relative;
  z-index:12;
  width:min(1400px, 100%);
  height:0;
  min-height:0;
  max-height: 100%;
  overflow:hidden;
  background:transparent;
  opacity:0;
  pointer-events:none;
  transition:height .72s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
  box-sizing: border-box;
}
.dvm-game-stage.is-open {
  height: min(720px, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  min-height: 300px;
  opacity:1;
  pointer-events:auto;
  touch-action:none;
}
.dvm-game-canvas {
  position:absolute;inset:0;width:100%;height:100%;display:block;
  background:transparent;touch-action:none;user-select:none;
}

/* Limites do campo */
.dvm-game-boundary {
  position:absolute;
  z-index:3;
  left:3%;right:3%;
  height:10px;
  pointer-events:none;
}
.dvm-game-boundary-top { top:54px; }
.dvm-game-boundary-bottom { bottom:18px; }
.dvm-game-boundary::before,
.dvm-game-boundary::after {
  content:"";
  position:absolute;left:0;right:0;
  border-top:3px solid var(--dvm-game-black);
  transform-origin:center;
}
.dvm-game-boundary-top::before { top:1px;transform:rotate(-.18deg); }
.dvm-game-boundary-top::after { top:5px;opacity:.18;transform:rotate(.12deg); }
.dvm-game-boundary-bottom::before { top:1px;transform:rotate(.14deg); }
.dvm-game-boundary-bottom::after { top:5px;opacity:.18;transform:rotate(-.10deg); }

/* HUD */
.dvm-game-hud {
  position:absolute;z-index:5;top:15px;left:50%;transform:translateX(-50%);
  display:flex;gap:14px;align-items:center;
  font:900 11px/1 system-ui,sans-serif;letter-spacing:.09em;color:var(--dvm-game-black);
}
.dvm-game-hud .is-muted { opacity:.46; }
.dvm-game-stars { display:flex;align-items:center;gap:4px; }
.dvm-game-stars>span {
  color:var(--dvm-game-yellow);
  -webkit-text-stroke:1px var(--dvm-game-black);
  font-size:15px;
}
.dvm-game-badge {
  padding:3px 7px;border:2px solid var(--dvm-game-black);
  background:var(--dvm-game-yellow);
}
.dvm-game-sound {
  border:2px solid var(--dvm-game-black);
  background:var(--dvm-game-white);
  color:var(--dvm-game-black);
  box-shadow:3px 3px 0 var(--dvm-game-yellow);
  padding:4px 7px;
  font:900 11px/1 system-ui,sans-serif;
  cursor:pointer;
}
.dvm-game-sound.is-off { opacity:.45;box-shadow:none; }

/* Controles */
.dvm-game-controls {
  position:absolute;
  z-index:30;
  top:calc(18px + env(safe-area-inset-top));
  right:calc(22px + env(safe-area-inset-right));
  display:flex;
  gap:10px;
}
.dvm-game-controls button {
  width:46px;height:46px;
  border:3px solid var(--dvm-game-black);
  background:var(--dvm-game-white);
  color:var(--dvm-game-black);
  box-shadow:5px 5px 0 var(--dvm-game-yellow);
  cursor:pointer;
}
.dvm-game-pause { font:900 19px/1 system-ui,sans-serif; }
.dvm-game-close { font:500 28px/1 system-ui,sans-serif; }
.dvm-game-controls button:hover,
.dvm-game-controls button:focus-visible {
  background:var(--dvm-game-yellow);
  outline:none;
}

/* Prompt — posição é 100% definida via JS (positionPrompt) */
.dvm-game-prompt {
  position:absolute;z-index:5;text-align:center;color:var(--dvm-game-black);pointer-events:none;
  max-width: 70%;
}
.dvm-game-prompt strong {
  display:block;font:900 clamp(14px,1.5vw,22px)/1.05 system-ui,sans-serif;
  letter-spacing:.06em;
}
.dvm-game-prompt span {
  display:block;margin-top:6px;font:600 11px/1 system-ui,sans-serif;
  letter-spacing:.08em;opacity:.55;
}

/* Pause */
.dvm-game-pause-overlay {
  position:absolute;inset:0;z-index:24;display:grid;place-items:center;pointer-events:none;
}
.dvm-game-pause-card {
  background:var(--dvm-game-white);
  border:3px solid var(--dvm-game-black);
  box-shadow:8px 8px 0 var(--dvm-game-yellow);
  padding:16px 22px;text-align:center;transform:rotate(-1deg);
}
.dvm-game-pause-card strong { display:block;font:900 22px/1 system-ui,sans-serif; }
.dvm-game-pause-card span {
  display:block;margin-top:6px;opacity:.55;
  font:800 10px/1 system-ui,sans-serif;letter-spacing:.06em;
}
.dvm-game-countdown {
  position:absolute;z-index:26;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-2deg);
  font:900 clamp(76px,15vw,160px)/1 system-ui,sans-serif;
  text-shadow:8px 8px 0 var(--dvm-game-yellow);
  pointer-events:none;
}

/* Toast + TAKE */
.dvm-game-toast {
  position:absolute;z-index:25;left:50%;top:23%;
  transform:translate(-50%,-50%) rotate(-1deg);
  border:3px solid var(--dvm-game-black);
  background:var(--dvm-game-yellow);
  box-shadow:6px 6px 0 var(--dvm-game-black);
  padding:10px 15px;
  font:900 12px/1 system-ui,sans-serif;
  letter-spacing:.07em;
  pointer-events:none;
}
.dvm-game-take-flash {
  position:absolute;z-index:25;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-2deg);
  font:900 clamp(42px,8vw,90px)/.9 system-ui,sans-serif;
  color:var(--dvm-game-black);
  text-shadow:7px 7px 0 var(--dvm-game-yellow);
  pointer-events:none;
}
.dvm-game-take-flash.show { animation:dvmTakeFlash 1.25s steps(5,end) both; }
@keyframes dvmTakeFlash {
  0%{opacity:0;transform:translate(-50%,-46%) rotate(-4deg) scale(.88)}
  18%{opacity:1}
  72%{opacity:1;transform:translate(-50%,-52%) rotate(1deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) rotate(-1deg) scale(1.05)}
}

/* Game over */
.dvm-game-over {
  position:absolute;z-index:28;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-1deg);
  min-width:min(88vw,320px);
  padding:22px 24px 24px;
  border:3px solid var(--dvm-game-black);
  background:var(--dvm-game-white);
  box-shadow:9px 9px 0 var(--dvm-game-yellow);
  color:var(--dvm-game-black);
  text-align:center;
}
.dvm-game-over-title {
  display:block;margin-bottom:12px;
  font:900 24px/1 system-ui,sans-serif;
}
.dvm-game-over>div { margin-top:8px;font:800 12px/1 system-ui,sans-serif;letter-spacing:.08em; }
.dvm-game-over-actions {
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px!important;
}
.dvm-game-over-actions button {
  min-height:42px;border:2px solid var(--dvm-game-black);
  font:900 11px/1 system-ui,sans-serif;letter-spacing:.05em;cursor:pointer;
}
.dvm-game-restart { background:var(--dvm-game-yellow);color:var(--dvm-game-black); }
.dvm-game-close-secondary { background:var(--dvm-game-white);color:var(--dvm-game-black); }

body.dvm-game-open-mobile-lock {
  overflow: hidden !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

@media (max-width: 960px) {
  .dvm-game-stage.is-open {
    height: min(720px, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    min-height: 300px;
    max-height: 100%;
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
    touch-action: none;
  }
  .dvm-game-stage.is-open .dvm-game-canvas {
    touch-action: none;
  }
  .dvm-game-hud {
    top: calc(11px + env(safe-area-inset-top));
  }
  .dvm-game-controls {
    top: calc(14px + env(safe-area-inset-top));
    right: calc(18px + env(safe-area-inset-right));
  }
  .dvm-game-boundary-top { top: calc(54px + env(safe-area-inset-top)); }
}

@media (max-width:719px) {
  .dvm-game-stage.is-open {
    height: min(720px, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    min-height: 300px;
    max-height: 100%;
  }
  .dvm-game-hud {
    top: calc(11px + env(safe-area-inset-top)); left: 12px; right: 125px; transform: none;
    max-width: none; display: flex; flex-wrap: wrap; gap: 5px 9px;
  }
  .dvm-game-controls { top: calc(14px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); gap: 8px; }
  .dvm-game-controls button { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion:reduce) {
  .dvm-game-stage { transition-duration:.01ms!important; }
}

/* V37 — Novo visual “CLIQUE PARA VOAR” como etiqueta amarela DVM */
.dvm-game-prompt {
  transform: translateX(-50%) translateY(6px);
  animation: dvmPromptEnter .42s cubic-bezier(.2,.82,.2,1) both;
  animation-delay: .05s;
}
.dvm-game-prompt strong {
  background: var(--dvm-game-yellow);
  color: var(--dvm-game-black);
  border: 3px solid var(--dvm-game-black);
  border-radius: 5px 7px 4px 8px;
  padding: 9px 18px 8px;
  font: 900 clamp(13px,1.45vw,18px)/1.05 var(--font,"Trebuchet MS",ui-rounded,system-ui,sans-serif) !important;
  letter-spacing: .10em;
  box-shadow: 4px 5px 0 var(--dvm-game-black);
  white-space: nowrap;
}
.dvm-game-prompt span {
  margin-top: 10px !important;
  font-weight: 500 !important;
  opacity: .62 !important;
  letter-spacing: .09em;
}
@keyframes dvmPromptEnter {
  0%   { opacity: 0; transform: translateX(-50%) translateY(14px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(6px); }
}
@media (max-width: 720px) {
  .dvm-game-prompt strong {
    padding: 8px 14px 7px;
    border-width: 2.5px;
    box-shadow: 3px 4px 0 var(--dvm-game-black);
  }
}


html.dvm-game-mode .site-menu,
html.dvm-game-mode .social-links,
html.dvm-game-mode .closing-note {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .18s ease, visibility 0s linear .18s;
}


/* Feedback imediato do botão JOGAR antes dos assets críticos terminarem. */
.dvm-play-btn.is-preparing {
  cursor: wait;
}
.dvm-play-btn.is-preparing .dvm-camera-hop-inner {
  animation: none !important;
  transform: translateY(-3px) rotate(-1deg);
}
.dvm-play-btn.is-preparing .dvm-camera-play-label {
  bottom: -30px;
  min-width: max-content;
  padding: 7px 12px 6px;
  border-width: 2.5px;
  background: var(--dvm-game-yellow);
  color: var(--dvm-game-black);
  box-shadow: 4px 5px 0 var(--dvm-game-black);
  font-size: 11.5px;
  letter-spacing: .08em;
}
@media (max-width: 719px) {
  .dvm-play-btn.is-preparing .dvm-camera-play-label {
    bottom: -34px;
    font-size: 10.5px;
    padding: 6px 10px 5px;
  }
}


/* Rodada 2026-09-12 - HUD, offline e protecao de long press no game. */
.dvm-game-total-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.dvm-game-offline {
  border: 2px solid var(--dvm-game-black);
  background: var(--dvm-game-white);
  color: var(--dvm-game-black);
  box-shadow: 3px 3px 0 var(--dvm-game-yellow);
  padding: 4px 7px;
  font: 900 11px/1 system-ui, sans-serif;
  cursor: pointer;
}
.dvm-game-offline.is-ready {
  background: var(--dvm-game-yellow);
  box-shadow: 3px 3px 0 var(--dvm-game-black);
}
.dvm-game-stage.is-open,
.dvm-game-stage.is-open *,
.dvm-game-fixed-layer:has(.is-open),
.dvm-game-fixed-layer:has(.is-open) * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.dvm-game-stage.is-open img,
.dvm-game-fixed-layer:has(.is-open) img {
  -webkit-user-drag: none;
  user-drag: none;
}
@media (max-width: 719px) {
  .dvm-game-hud {
    right: 112px;
    gap: 4px 7px;
    font-size: 10px;
  }
  .dvm-game-total-stars,
  .dvm-game-offline,
  .dvm-game-sound {
    font-size: 10px;
  }
  .dvm-game-offline,
  .dvm-game-sound {
    padding: 4px 6px;
  }
}
