/* SOCORRO. Dono: frente Check-in e Socorro. */
/* =====================================================================================
   SOCORRO 2.1 ("Estou em tentação agora"): calma total, nada de caixas empilhadas.
   A praia do guardião sob a estrela; a estrela da pintura fica no centro do orbe de respiração
   (js/tela-socorro.js alinha a imagem). Um anel fino conta os 15 minutos.
   ===================================================================================== */
.socorro { position: fixed; inset: 0; z-index: 75; overflow: hidden; background: #04050d; animation: sosAbre .6s ease both; }
.socorro.sai { animation: sosSai .3s var(--sai) both; }
@keyframes sosAbre { from { opacity: 0; } }
@keyframes sosSai { to { opacity: 0; } }

/* ---------- a cena ---------- */
.sos-cena { position: absolute; inset: 0; pointer-events: none; overflow: hidden; background: linear-gradient(180deg, #03040b 0%, #070a1c 40%, #05060e 100%); }
.sos-img {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px); mask-image: linear-gradient(180deg, transparent 0, #000 70px);
}
.sos-img.on { opacity: .62; animation: sosVive 44s ease-in-out infinite alternate; }
@keyframes sosVive { to { transform: scale(1.05); } }
@media (min-width: 761px) {
  .sos-img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px), linear-gradient(90deg, transparent calc(50% - 380px), #000 calc(50% - 250px), #000 calc(50% + 250px), transparent calc(50% + 380px)); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 70px), linear-gradient(90deg, transparent calc(50% - 380px), #000 calc(50% - 250px), #000 calc(50% + 250px), transparent calc(50% + 380px)); mask-composite: intersect; }
}
.sos-luz {   /* a luz que respira em volta da estrela */
  position: absolute; inset: 0; opacity: .6;
  background: radial-gradient(260px 260px at var(--sos-ox, 50%) var(--sos-oy, 28%), rgba(255,230,180,.20), rgba(150,160,255,.08) 45%, transparent 72%);
}
.sos-veu {   /* escurece onde há texto; deixa a estrela e o guardião (perto dos botões) aparecerem */
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(3,4,10,.72) 0, rgba(3,4,10,.14) 110px, rgba(3,4,10,0) calc(var(--sos-oy, 210px) + 50px), rgba(3,4,10,.6) calc(var(--sos-oy, 210px) + 150px), rgba(3,4,10,.7) calc(var(--sos-jy, 610px) - 30px), rgba(3,4,10,.26) calc(var(--sos-jy, 610px) + 40px), rgba(3,4,10,.3) calc(100% - 120px), rgba(3,4,10,.86) calc(100% - 50px), rgba(3,4,10,.95) 100%);
}
.socorro .ck-ceu { position: absolute; inset: 0; z-index: 1; }
.socorro .ck-ceu i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #f4f2ff; opacity: calc(var(--a) * .45); box-shadow: 0 0 calc(var(--s) * 3) rgba(200,210,255,.55); animation: ckCintila var(--t) ease-in-out infinite var(--d); }

/* ---------- casca ---------- */
.sos-caixa { position: relative; z-index: 2; height: 100%; max-width: 520px; margin: 0 auto; display: grid; grid-template-rows: auto 1fr auto; }
.sos-topo { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--st) + 10px) 14px 0; height: calc(var(--st) + 54px); }
.sos-meio { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: clamp(4px, 1.6dvh, 18px) 22px 0; text-align: center; min-height: 0; }
.sos-baixo { display: flex; gap: 10px; padding: 10px 16px calc(var(--sb) + 14px); }
.sos-baixo .bt { min-height: 56px; }
.sos-volta { flex: 0 0 56px; width: 56px; padding: 0; }
.sos-volta[disabled] { opacity: .3; }
.sos-segue { flex: 1; }

/* botão da voz (com as ondinhas quando o Sentinela fala) */
.sos-som { position: relative; overflow: visible; }
.sos-som::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(240,210,150,.6); opacity: 0; }
.sos-som.fala { color: var(--ouro-2); border-color: rgba(240,210,150,.45); }
.sos-som.fala::after { animation: sosFala 1.8s ease-out infinite; }
.sos-som.preso { color: var(--ouro-2); border-color: rgba(240,210,150,.6); }
.sos-som.preso::after { animation: sosFala 1.2s ease-out infinite; }
.sos-som.mudo { color: var(--txt-3); }
.sos-dica-som { position: absolute; right: 62px; top: calc(var(--st) + 20px); font-size: 13px; font-weight: 500; color: var(--ouro-2); padding: 6px 12px; border-radius: 99px; background: rgba(14,12,20,.6); border: 1px solid rgba(240,210,150,.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .4s var(--mola); pointer-events: none; }
.sos-topo.preso .sos-dica-som { opacity: 1; transform: none; }
@keyframes sosFala { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
/* enquanto o Sentinela fala, as ondas do alto-falante viram três barrinhas que se mexem, DENTRO do círculo
   (o js troca o ícone 'som' pelo 'falante', que é o mesmo alto-falante sem as ondas) */
.sos-ondas { position: absolute; left: 50%; top: 50%; width: 10px; height: 12px; margin-top: -6px; display: flex; align-items: center; justify-content: space-between; opacity: 0; transition: opacity .25s; pointer-events: none; }
.sos-ondas b { width: 2px; height: 4px; border-radius: 2px; background: currentColor; }
.sos-som svg { transition: transform .25s var(--mola); }
.sos-som.fala svg { transform: translateX(-3px); }   /* alto-falante e barrinhas juntos ficam no meio do círculo */
.sos-som.fala .sos-ondas { opacity: 1; }
.sos-som.fala .sos-ondas b { animation: sosBarra .9s ease-in-out infinite; }
.sos-som.fala .sos-ondas b:nth-child(2) { animation-delay: -.3s; } .sos-som.fala .sos-ondas b:nth-child(3) { animation-delay: -.6s; }
@keyframes sosBarra { 0%, 100% { height: 3px; } 50% { height: 11px; } }

/* ---------- o orbe de respiração ---------- */
.sos-orbe { --tam: min(256px, 64vw, 31dvh); position: relative; width: var(--tam); height: var(--tam); flex: none; margin-bottom: 34px; }
.sos-raios {
  position: absolute; inset: -34%; border-radius: 50%; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(255,236,196,0) 0deg, rgba(255,236,196,.07) 3deg, rgba(255,236,196,0) 7deg, rgba(255,236,196,0) 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.55) 26%, transparent 60%); mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.55) 26%, transparent 60%);
  animation: sosGira 140s linear infinite;
}
@keyframes sosGira { to { transform: rotate(360deg); } }
.sos-halo {
  position: absolute; inset: 9%; border-radius: 50%; transform: scale(.5); opacity: .5; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(255,246,222,.62) 0%, rgba(246,214,150,.34) 16%, rgba(176,170,255,.16) 42%, rgba(143,156,255,.05) 60%, transparent 71%);
}
.sos-halo.dois { inset: -6%; transform: scale(.72); opacity: .25; background: radial-gradient(circle, rgba(255,232,190,.12) 0%, rgba(160,170,255,.08) 40%, transparent 70%); }
.sos-anel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sos-anel .a-trilho { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1.2; }
.sos-anel .a-feito { fill: none; stroke: url(#sOuro); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(240,200,120,.6)); transition: stroke-dashoffset .9s linear; }
.sos-anel .a-marca { fill: rgba(255,255,255,.22); transition: fill .6s; }
.sos-anel .a-marca.on { fill: #f6dc9c; }
.sos-anel #sCabeca { transition: transform .9s linear; }
.sos-estrela { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 0; filter: drop-shadow(0 0 16px rgba(255,226,170,.75)); will-change: transform; }
.sos-estrela .estrela4 { width: calc(var(--tam) * .44); height: calc(var(--tam) * .44); }
.sos-onda { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 1.5px solid rgba(255,228,176,.8); opacity: 0; pointer-events: none; }
.sos-onda.vai { animation: sosOnda 1.4s ease-out both; }
@keyframes sosOnda { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(4.6); } }
.sos-tempo { position: absolute; left: 50%; top: 96.5%; transform: translate(-50%, -16px); display: flex; flex-direction: column; align-items: center; }   /* o relógio fica na abertura do anel */
.sos-tempo b { order: 1; font: 500 31px/32px var(--serif); letter-spacing: .01em; color: var(--txt); font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 0 18px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); }
.sos-tempo span { order: 2; font: 600 9.5px/1 var(--cinzel); letter-spacing: .22em; text-transform: uppercase; color: rgba(245,239,228,.55); margin-top: 3px; white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,.8); }

.sos-resp { position: relative; width: 100%; height: 30px; margin: 0 0 8px; font: italic 400 21px/30px var(--serif); color: #e4e6ff; letter-spacing: .01em; text-shadow: 0 0 18px rgba(143,156,255,.55), 0 1px 10px rgba(0,0,0,.8); }
.sos-resp span { position: absolute; left: 0; right: 0; top: 0; animation: sosResp .8s ease .18s both; }
.sos-resp span.sai { animation: sosRespSai .4s ease both; }
@keyframes sosRespSai { to { opacity: 0; transform: translateY(-4px); filter: blur(3px); } }
.sos-resp span.f1 { color: #fff1d0; text-shadow: 0 0 18px rgba(240,200,120,.5), 0 1px 10px rgba(0,0,0,.8); }
.sos-resp span.fim { color: var(--ouro-2); font-style: normal; font: 600 13px/30px var(--cinzel); letter-spacing: .24em; text-transform: uppercase; }
@keyframes sosResp { from { opacity: 0; transform: translateY(5px); filter: blur(3px); } }

/* ---------- o passo, os pontos e a jaculatória ---------- */
.sos-passo { width: 100%; max-width: 380px; height: 138px; }
.sos-p { animation: sosPasso .55s var(--mola) both; }
.sos-p.volta { animation-name: sosPassoV; }
@keyframes sosPasso { from { opacity: 0; transform: translateX(22px); } }
@keyframes sosPassoV { from { opacity: 0; transform: translateX(-22px); } }
.sos-p h2 { font: 500 27px/1.16 var(--serif); letter-spacing: -.015em; margin: 0 0 8px; text-wrap: balance; text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.sos-p p { margin: 0 auto; color: var(--txt-2); font-size: 16px; line-height: 1.5; text-wrap: pretty; text-shadow: 0 1px 12px rgba(0,0,0,.85); }
.sos-pontos { margin: 6px 0 0; }
.sos-pontos i.feito { background: rgba(217,180,106,.55); }
.socorro.venceu .sos-pontos { opacity: 0; transition: opacity .5s; }
.sos-jac { font: italic 400 19px/1.4 var(--serif); color: var(--ouro-2); margin: 16px auto 0; max-width: 330px; text-wrap: balance; text-shadow: 0 0 22px rgba(240,200,120,.35), 0 1px 10px rgba(0,0,0,.85); }

/* 15 minutos vencidos: o anel se completa em ouro e a estrela se abre */
.socorro.venceu .sos-anel .a-trilho { stroke: rgba(240,210,150,.35); }
.socorro.venceu .sos-estrela { filter: drop-shadow(0 0 26px rgba(255,226,170,.95)); }
.socorro.venceu .sos-halo { background: radial-gradient(circle, rgba(255,246,222,.7) 0%, rgba(246,214,150,.42) 18%, rgba(240,200,120,.16) 44%, transparent 71%); }

/* telas baixas */
@media (max-height: 740px) {
  .sos-orbe { margin-bottom: 30px; }
  .sos-resp { margin: 0 0 4px; font-size: 19px; }
  .sos-passo { height: 132px; }
  .sos-p h2 { font-size: 24px; }
  .sos-p p { font-size: 15px; }
  .sos-jac { font-size: 17px; margin-top: 10px; }
}
@media (max-height: 640px) { .sos-jac { display: none; } }
@media (prefers-reduced-transparency: reduce) {
  .sos-dica-som { background: #15131c; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sos-raios, .sos-img.on, .socorro .ck-ceu i { animation: none; }
  .sos-som.fala .sos-ondas b { animation: none; height: 7px; }
  .sos-som.fala .sos-ondas b:nth-child(2) { height: 11px; }
}