/* ==========================================================
   CENÁRIO — campo cirúrgico estéril
   Camadas (de baixo para cima): tecido, redemoinho suave, mesa,
   ECG, luz que segue o mouse, instrumentos, vinheta, alerta, bainha.
   Tudo fica atrás do jogo (z-index 0) e não bloqueia cliques.
   O estado do plantão chega por body[data-cena]:
   menu · plantao · critico · sucesso · erro
   ========================================================== */
.cenario {
  --lx: 50vw; --ly: 26vh; --px: 0px; --py: 0px;
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: #0b2f33 url(mesa/fundo.jpg) 0 0 / 100% 100% no-repeat;
}
/* dobras do campo de tecido */
.cenario::before {
  position: absolute; inset: 0; content: "";
  background:
    linear-gradient(112deg, transparent 0 16%, rgba(255, 255, 255, .06) 17% 19%, transparent 22% 54%, rgba(0, 40, 42, .09) 55% 58%, transparent 62%),
    linear-gradient(68deg, transparent 0 38%, rgba(255, 255, 255, .045) 40% 42%, transparent 46% 78%, rgba(0, 40, 42, .07) 80% 83%, transparent 87%);
}

.cenario-redemoinho {
  position: absolute; inset: -35%; opacity: .55;
  background:
    radial-gradient(circle at 28% 32%, rgba(255, 209, 102, .10), transparent 34%),
    radial-gradient(circle at 72% 66%, rgba(37, 143, 196, .16), transparent 38%),
    radial-gradient(circle at 60% 20%, rgba(116, 224, 184, .14), transparent 30%);
  animation: cenario-giro 140s linear infinite;
}
@keyframes cenario-giro { to { transform: rotate(360deg); } }

/* a "mesa de operação": elipse com aro, como a arena do tabuleiro */
.cenario-mesa {
  position: absolute; inset: 7% 8% 9%; border-radius: 50% / 46%;
  background: radial-gradient(ellipse at 50% 38%, rgba(226, 255, 247, .17), rgba(226, 255, 247, .05) 62%, transparent 72%);
  box-shadow: inset 0 0 0 3px rgba(235, 255, 250, .10), inset 0 0 90px rgba(0, 40, 42, .30), 0 0 0 14px rgba(5, 45, 45, .05);
}

.cenario-ecg { position: absolute; right: 0; bottom: 7vh; left: 0; height: 110px; overflow: hidden; opacity: .13; }
.cenario-ecg svg { width: 3600px; height: 110px; animation: cenario-ecg 16s linear infinite; }
.cenario-ecg path { fill: none; stroke: #eafff9; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
@keyframes cenario-ecg { to { transform: translateX(-900px); } }

/* luz cirúrgica que acompanha o mouse (só transform: barato para a GPU) */
.cenario-luz {
  --cor-luz: rgba(236, 255, 250, .24);
  position: absolute; top: 0; left: 0; width: 780px; height: 780px; margin: -390px 0 0 -390px;
  background: radial-gradient(circle, var(--cor-luz), transparent 66%);
  transform: translate3d(var(--lx), var(--ly), 0); will-change: transform;
}

/* instrumentos */
.cenario-objetos { position: absolute; inset: 0; }
.inst {
  --x: 0%; --y: 0%; --r: 0deg; --w: 10; --ar: 1; --d: .6; --dx: 0px; --dy: 0px; --bob: 7s; --atraso: 0s;
  position: absolute; top: var(--y); left: var(--x);
  width: calc(var(--w) * 1vw); aspect-ratio: var(--ar);
  transform: translate(calc(var(--px) * var(--d) + var(--dx)), calc(var(--py) * var(--d) + var(--dy))) rotate(var(--r));
  pointer-events: auto; cursor: grab; touch-action: auto; user-select: none; -webkit-user-select: none;
}
.inst .peca {
  width: 100%; height: 100%; opacity: .96; background: center / contain no-repeat;
  filter: drop-shadow(0 8px 5px rgba(0, 28, 30, .38));
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), filter .25s, opacity .25s;
  animation: inst-flutuar var(--bob) ease-in-out var(--atraso) infinite alternate;
}
@keyframes inst-flutuar { from { translate: 0 -3px; rotate: -1.2deg; } to { translate: 0 4px; rotate: 1.2deg; } }
.inst:hover .peca { opacity: 1; transform: scale(1.1) rotate(-4deg); filter: brightness(1.12) drop-shadow(0 12px 7px rgba(0, 28, 30, .4)); }
.inst.segurando { cursor: grabbing; z-index: 2; }
.inst.segurando .peca { transform: scale(1.16) rotate(-7deg); filter: brightness(1.18) drop-shadow(0 18px 9px rgba(0, 28, 30, .45)); animation-play-state: paused; }
.inst.voltando { transition: transform .75s cubic-bezier(.34, 1.56, .64, 1); }
.inst.tilintar .peca { animation: inst-tilintar .7s ease-out; }
@keyframes inst-tilintar {
  0% { transform: rotate(0) scale(1.14); }
  20% { transform: rotate(-14deg) scale(1.16); }
  40% { transform: rotate(11deg) scale(1.12); }
  60% { transform: rotate(-6deg) scale(1.08); }
  80% { transform: rotate(3deg) scale(1.04); }
  100% { transform: rotate(0) scale(1); }
}

/* faíscas e rótulo que surgem ao clicar num instrumento */
.faisca { position: absolute; z-index: 3; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--cor, #ffd166); box-shadow: 0 0 0 1px rgba(0, 40, 42, .35); animation: faisca .7s ease-out forwards; }
@keyframes faisca {
  from { opacity: 1; transform: translate(0, 0) scale(1.2); }
  to { opacity: 0; transform: translate(calc(cos(var(--a)) * var(--dist)), calc(sin(var(--a)) * var(--dist))) scale(.3); }
}
.cenario-rotulo {
  position: absolute; z-index: 3; transform: translate(-50%, -150%); padding: 7px 9px; border-radius: 6px;
  background: rgba(7, 49, 48, .88); color: var(--cream); font: 400 9px/1.2 var(--pixel); white-space: nowrap;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25); animation: rotulo .9s ease-out forwards;
}
@keyframes rotulo {
  0% { opacity: 0; translate: 0 10px; }
  14% { opacity: 1; translate: 0 0; }
  45% { opacity: 1; translate: 0 -10px; }
  100% { opacity: 0; translate: 0 -46px; }
}
}

.cenario-vinheta {
  position: absolute; inset: 0; opacity: .72; transition: opacity .9s;
  background: radial-gradient(ellipse at 50% 44%, transparent 46%, rgba(2, 30, 32, .62) 100%);
}
.cenario-alerta { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; box-shadow: inset 0 0 170px 36px var(--alerta, rgba(230, 83, 80, .5)); }
.cenario-bainha { position: absolute; inset: 14px; border: 2px dashed rgba(236, 255, 250, .17); border-radius: 26px; }

/* estados do plantão */
body[data-cena="plantao"] .cenario-vinheta, body[data-cena="critico"] .cenario-vinheta { opacity: 1; }
body[data-cena="critico"] .cenario-alerta { --alerta: rgba(230, 83, 80, .55); opacity: 1; animation: cenario-pulsar 1.6s ease-in-out infinite; }
body[data-cena="critico"] .cenario-luz { --cor-luz: rgba(255, 176, 168, .26); }
body[data-cena="sucesso"] .cenario-alerta { --alerta: rgba(116, 224, 184, .5); animation: cenario-clarao 2.8s ease-out forwards; }
body[data-cena="sucesso"] .cenario-luz { --cor-luz: rgba(214, 255, 238, .32); }
body[data-cena="erro"] .cenario-alerta { --alerta: rgba(255, 136, 123, .42); animation: cenario-clarao 2.4s ease-out forwards; }
@keyframes cenario-pulsar { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes cenario-clarao { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* telas estreitas: menos objetos e nada de arrastar */
@media (max-width: 760px) {
  .inst:nth-child(n + 7) { display: none; }
  .cenario-mesa { inset: 5% 3% 7%; }
  .cenario-bainha { inset: 8px; border-radius: 18px; }
}
@media (hover: none) { .inst { cursor: default; } }

@media (prefers-reduced-motion: reduce) {
  .cenario-redemoinho, .cenario-ecg svg, .inst .peca, .inst.tilintar .peca, body[data-cena="critico"] .cenario-alerta { animation: none; }
  .inst .peca, .inst.voltando { transition: none; }
  body[data-cena="critico"] .cenario-alerta { opacity: .8; }
  body[data-cena="sucesso"] .cenario-alerta, body[data-cena="erro"] .cenario-alerta { animation: none; opacity: .6; }
  .faisca, .cenario-rotulo { animation-duration: .01s; }
}
@media print { .cenario { display: none; } }

/* Bandeja nova: o fundo já traz o campo, as dobras e a moldura de aço */
.cenario::before, .cenario-redemoinho, .cenario-mesa, .cenario-ecg, .cenario-bainha { display: none; }
.cenario-vinheta { opacity: .35; }
body[data-cena="plantao"] .cenario-vinheta, body[data-cena="critico"] .cenario-vinheta { opacity: .55; }
.inst .peca-afastador-grande { background-image: url(mesa/afastador-grande.png); }
.inst .peca-afastador-pequeno { background-image: url(mesa/afastador-pequeno.png); }
.inst .peca-agulha-fio { background-image: url(mesa/agulha-fio.png); }
.inst .peca-bisturi-10 { background-image: url(mesa/bisturi-10.png); }
.inst .peca-bisturi-15 { background-image: url(mesa/bisturi-15.png); }
.inst .peca-fio-embalagem-a { background-image: url(mesa/fio-embalagem-a.png); }
.inst .peca-fio-embalagem-b { background-image: url(mesa/fio-embalagem-b.png); }
.inst .peca-gaze { background-image: url(mesa/gaze.png); }
.inst .peca-hemostatica-curva { background-image: url(mesa/hemostatica-curva.png); }
.inst .peca-hemostatica-reta-a { background-image: url(mesa/hemostatica-reta-a.png); }
.inst .peca-hemostatica-reta-b { background-image: url(mesa/hemostatica-reta-b.png); }
.inst .peca-pinca-anatomica { background-image: url(mesa/pinca-anatomica.png); }
.inst .peca-porta-agulha { background-image: url(mesa/porta-agulha.png); }
.inst .peca-tesoura { background-image: url(mesa/tesoura.png); }