/* CHECK-IN. Dono: frente Check-in e Socorro. */
/* =====================================================================================
   CHECK-IN 2.1: tela cheia sobre a capela do guardião (cena própria, bem escura, com estrelas).
   Topo fixo, conteúdo no meio, botões FIXOS embaixo. A cor da fase (--ck-cor) passa por tudo:
   o brilho da cena, o ícone, o rótulo, o trilho e a borda da dica. Nada pula de lugar.
   ===================================================================================== */
@property --ck-cor { syntax: '<color>'; inherits: true; initial-value: #e2bd6e; }

.ck { position: fixed; inset: 0; bottom: var(--teclado, 0px); z-index: 60; overflow: hidden; background: #050407; --ck-cor: #e2bd6e; transition: --ck-cor .8s ease; animation: ckAbre .45s var(--mola) both; }
.ck.sai { animation: ckSai .28s var(--sai) both; }
@keyframes ckAbre { from { opacity: 0; transform: translateY(14px); } }
@keyframes ckSai { to { opacity: 0; transform: translateY(18px); } }

/* ---------- a cena: capela escura + cor da fase + estrelas ---------- */
.ck-cena { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ck-cena img {
  position: absolute; left: 50%; top: 0; width: 100%; max-width: 760px; height: 100%; transform: translateX(-50%);
  object-fit: cover; object-position: 50% 62%; opacity: 0; transition: opacity 1.2s ease; filter: saturate(.9) contrast(1.05);
}
.ck-cena img.on { opacity: .36; filter: blur(1.6px) saturate(.9) contrast(1.05); animation: ckCenaVive 46s ease-in-out infinite alternate; }
@keyframes ckCenaVive { to { transform: translateX(-50%) scale(1.06); } }
@media (min-width: 761px) { .ck-cena img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); } }
.ck-cena::after {   /* véus: topo e base escuros, para o texto e os botões lerem bem */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,4,7,.8) 0%, rgba(5,4,7,.28) 20%, rgba(5,4,7,.34) 40%, rgba(5,4,7,.52) 60%, rgba(5,4,7,.6) 80%, rgba(5,4,7,.94) 100%);
}
.ck-tom {   /* a luz da fase, vinda do alto, como vela */
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(90% 48% at 50% 0%, color-mix(in srgb, var(--ck-cor) 26%, transparent), transparent 72%),
              radial-gradient(70% 40% at 50% 100%, color-mix(in srgb, var(--ck-cor) 10%, transparent), transparent 70%);
}
.ck-ceu { position: absolute; inset: 0; z-index: 2; }
.ck-ceu i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff4dc; opacity: calc(var(--a) * .45); box-shadow: 0 0 calc(var(--s) * 3) rgba(255,228,170,.55); animation: ckCintila var(--t) ease-in-out infinite var(--d); }
.ck-ceu i.g::before, .ck-ceu i.g::after { content: ''; position: absolute; left: 50%; top: 50%; background: linear-gradient(90deg, transparent, rgba(255,236,196,.75), transparent); }
.ck-ceu i.g::before { width: 14px; height: 1px; margin: -.5px 0 0 -7px; }
.ck-ceu i.g::after { width: 1px; height: 14px; margin: -7px 0 0 -.5px; background: linear-gradient(180deg, transparent, rgba(255,236,196,.75), transparent); }
@keyframes ckCintila { 0%, 100% { opacity: calc(var(--a) * .3); } 50% { opacity: var(--a); } }

/* ---------- casca: topo, meio e botões ---------- */
.ck-caixa { position: relative; z-index: 3; height: 100%; max-width: 520px; margin: 0 auto; display: grid; grid-template-rows: auto 1fr auto; }
.ck-topo { padding: calc(var(--st) + 10px) 16px 4px; }
.ck-linha { display: flex; align-items: center; gap: 12px; height: 44px; }
.ck-fase { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; font: 600 12.5px/1 var(--cinzel); letter-spacing: .2em; text-transform: uppercase; color: var(--ck-cor); white-space: nowrap; }
.ck-fase span { overflow: hidden; text-overflow: ellipsis; }
.ck-fase svg { width: 17px; height: 17px; flex: none; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ck-cor) 70%, transparent)); }
.ck-fase.troca > * { animation: ckFase .7s var(--mola) both; }
.ck-fase.troca > span { animation-delay: .06s; }
@keyframes ckFase { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.ck-conta { font: 500 16px/1 var(--serif); color: var(--txt-3); letter-spacing: .02em; }
.ck-barras { display: grid; gap: 6px; margin-top: 8px; }
.ck-barras i { height: 3px; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; position: relative; }
.ck-barras b { position: absolute; inset: 0; width: 0; border-radius: 9px; background: var(--c); box-shadow: 0 0 8px var(--c); transition: width .55s var(--mola); }

.ck-meio {
  overflow-y: auto; overscroll-behavior: contain; padding: 0 22px; scrollbar-width: none; display: flex; flex-direction: column;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent);
}
.ck-meio::-webkit-scrollbar { display: none; }
.ck-passo { flex: 1 0 auto; display: flex; flex-direction: column; padding: clamp(6px, 1.8dvh, 22px) 0 14px; text-align: center; animation: ckEntra .5s var(--mola) both; }
.ck-passo > * { flex: none; }
.ck-passo.volta { animation-name: ckVolta; }
@keyframes ckEntra { from { opacity: 0; transform: translateX(26px); } }
@keyframes ckVolta { from { opacity: 0; transform: translateX(-26px); } }

.ck-baixo { position: relative; z-index: 2; display: flex; gap: 10px; padding: 10px 16px calc(var(--sb) + 14px); }
.ck-baixo .bt { min-height: 56px; }
.ck-volta { flex: 0 0 56px; width: 56px; padding: 0; transition: flex-basis .5s var(--mola), width .5s var(--mola), margin .5s var(--mola), opacity .3s, transform .18s var(--mola); }
.ck-volta[disabled] { opacity: .3; }
.ck-segue { flex: 1; }
.ck-baixo.fim .ck-volta { flex-basis: 0; width: 0; margin-right: -10px; opacity: 0; border-width: 0; }
/* aviso do check-in ("Falta responder...", "Escolha uma nota..."): logo acima dos botões, nunca em cima do X e da fase */
.ck-msg { position: absolute; left: 16px; right: 16px; bottom: 100%; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .22s ease, transform .45s var(--mola); }
.ck-msg.on { opacity: 1; transform: none; }
.ck-msg p {
  margin: 0; max-width: 440px; display: flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1.35; text-align: left;
  background: rgba(24,21,32,.9); border: 1px solid color-mix(in srgb, var(--ck-cor) 42%, transparent);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 0 24px -10px color-mix(in srgb, var(--ck-cor) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.ck-msg svg { width: 19px; height: 19px; flex: none; color: var(--ck-cor); }

/* ---------- peças do passo ---------- */
.ck-ico { width: 56px; height: 56px; margin: 0 auto 12px; position: relative; display: grid; place-items: center; }
.ck-ico::before {   /* halo que respira */
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ck-cor) 30%, transparent) 0%, transparent 66%); animation: ckHalo 3.8s ease-in-out infinite;
}
.ck-ico > span {
  position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; color: color-mix(in srgb, var(--ck-cor) 70%, #fff);
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--ck-cor) 34%, transparent), color-mix(in srgb, var(--ck-cor) 7%, rgba(10,9,14,.6)) 72%);
  border: 1px solid color-mix(in srgb, var(--ck-cor) 52%, transparent);
  box-shadow: 0 0 30px -4px color-mix(in srgb, var(--ck-cor) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -8px 18px -10px rgba(0,0,0,.6);
}
.ck-ico svg { width: 27px; height: 27px; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ck-cor) 80%, transparent)); }
@keyframes ckHalo { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
.ck-eixo { font: 600 12px/1.35 var(--cinzel); letter-spacing: .2em; text-transform: uppercase; color: var(--ck-cor); margin: 0 auto 12px; max-width: 320px; text-shadow: 0 0 18px color-mix(in srgb, var(--ck-cor) 45%, transparent); }
.ck [tabindex="-1"]:focus { outline: none; }
.ck-perg { font: 500 27px/1.2 var(--serif); letter-spacing: -.015em; margin: 0 auto; max-width: 420px; text-wrap: balance; text-shadow: 0 2px 22px rgba(0,0,0,.7); }
.ck-sub { color: var(--txt-2); font-size: 15px; line-height: 1.5; margin: 10px auto 0; max-width: 400px; text-wrap: pretty; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.ck-entenda { align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -2px 0 -6px; padding: 0 12px; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--txt-3); transition: color .2s, background .2s; }
.ck-entenda svg { width: 16px; height: 16px; }
.ck-entenda:active { color: var(--txt); background: rgba(255,255,255,.06); }

/* escala 0 a 10 */
.ck-escala { --cor-v: rgba(245,239,228,.34); margin-top: clamp(0px, 1dvh, 10px); user-select: none; -webkit-user-select: none; }
.ck-leitura { position: relative; height: 98px; }
.ck-v {
  position: absolute; left: 0; right: 0; top: 0; text-align: center; font: 500 82px/1.08 var(--serif); letter-spacing: -.03em; color: var(--cor-v);
  font-variant-numeric: lining-nums tabular-nums; transition: color .3s;
  text-shadow: 0 0 34px color-mix(in srgb, var(--cor-v) 55%, transparent), 0 0 3px color-mix(in srgb, var(--cor-v) 35%, transparent);
}
.ck-v.pula { animation: ckPula .34s var(--mola); }
@keyframes ckPula { 40% { transform: scale(1.1); } }
.ck-vazio { position: absolute; left: 0; right: 0; top: 28px; font: italic 400 19px/1.3 var(--serif); color: var(--txt-3); opacity: 0; transition: opacity .3s; }
.ck-escala.sem .ck-vazio { opacity: 1; }
.ck-leitura small { position: absolute; left: 0; right: 0; bottom: 0; font-size: 13.5px; color: var(--txt-3); height: 18px; }
.ck-trilho { position: relative; height: 48px; margin: 4px 14px 0; touch-action: pan-y; cursor: pointer; outline: none; }
.ck-trilho .t-vidro {
  position: absolute; left: -14px; right: -14px; top: 50%; height: 16px; margin-top: -8px; border-radius: 99px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.1)), rgba(14,12,20,.45); border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.08), 0 8px 22px -10px rgba(0,0,0,.7);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.ck-trilho .t-cheio {
  position: absolute; left: -10px; top: 50%; height: 8px; margin-top: -4px; border-radius: 99px; width: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cor-v) 12%, transparent), var(--cor-v)); transition: background .3s;
  box-shadow: 0 0 14px color-mix(in srgb, var(--cor-v) 55%, transparent);
}
.ck-escala.sem .t-cheio { opacity: 0; }
.ck-trilho .t-marca { position: absolute; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: rgba(255,255,255,.28); }
.ck-trilho .t-marca.g { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: rgba(255,255,255,.45); }
.ck-trilho .t-bola {
  position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; will-change: left;
  background: radial-gradient(circle at 42% 34%, #ffffff 0%, #f6f0e2 48%, #d8cdb6 100%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--cor-v) 24%, transparent), 0 0 26px 6px color-mix(in srgb, var(--cor-v) 48%, transparent), 0 5px 14px rgba(0,0,0,.55);
  transition: box-shadow .3s, transform .22s var(--mola), opacity .3s;
}
.ck-escala.sem .t-bola { opacity: .42; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.ck-trilho.arrasta .t-bola { transform: scale(1.14); }
.ck-trilho:focus-visible .t-bola { outline: 2px solid var(--ouro-2); outline-offset: 5px; }
.ck-nums { display: flex; justify-content: space-between; margin: 2px 0 0; }
.ck-nums button { position: relative; width: 30px; height: 44px; margin: -3px 0; font: 500 16px/1 var(--serif); color: var(--txt-4); font-variant-numeric: lining-nums tabular-nums; transition: color .2s, transform .2s var(--mola); }
.ck-nums button.on { color: var(--cor-v); transform: scale(1.18); text-shadow: 0 0 12px color-mix(in srgb, var(--cor-v) 70%, transparent); }
.ck-pontas { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: var(--txt-3); margin: 2px 2px 0; }
.ck-pontas span:last-child { text-align: right; }

/* dica: vidro com borda da cor da fase, lugar e altura fixos (nada pula) */
.ck-dica { position: relative; flex: 1 0 150px; min-height: 150px; margin-top: 12px; }
.ck-dica .d-vidro {
  position: absolute; left: 0; right: 0; top: 0; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; text-align: left; padding: 12px 16px 12px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(12,10,18,.52);
  border: 1px solid color-mix(in srgb, var(--ck-cor) 48%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 34px -12px color-mix(in srgb, var(--ck-cor) 60%, transparent), 0 16px 40px -18px rgba(0,0,0,.8);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  opacity: 0; transform: translateY(8px) scale(.985); transition: opacity .35s ease, transform .5s var(--mola); pointer-events: none;
}
.ck-dica.on .d-vidro { opacity: 1; transform: none; pointer-events: auto; }
.ck-dica .d-cab { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 16px; margin-bottom: 7px; }
.ck-dica .d-cab b { display: flex; align-items: center; gap: 7px; font: 600 11.5px/1 var(--cinzel); letter-spacing: .18em; text-transform: uppercase; color: var(--ck-cor); }
.ck-dica .d-cab b svg { width: 15px; height: 15px; }
.ck-dica .d-mais { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 1px; min-height: 44px; margin: -12px -10px -16px 0; padding: 0 10px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: color-mix(in srgb, var(--ck-cor) 62%, #fff); white-space: nowrap; }
.ck-dica .d-mais[hidden] { display: none; }
.ck-dica .d-mais svg { width: 15px; height: 15px; }
.ck-dica .d-mais:active { background: rgba(255,255,255,.07); }
.ck-dica .d-vidro.corta { cursor: pointer; }   /* texto cortado: tocar em qualquer parte da dica abre o texto inteiro */
.ck-dica .d-txt { margin: 0; font-size: 15px; line-height: 1.5; color: var(--txt-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--linhas, none); overflow: hidden; }
/* folhas "O que fazer" e "Atenção agora": o texto inteiro */
.ck-dica-f { padding-top: 6px; }
.ck-dica-f .olho { color: var(--ck-cor); margin: 0 0 10px; }
.ck-dica-f h3 { margin: 0 0 10px; }
.ck-dica-f .f-sub { font-size: 16px; line-height: 1.6; margin-bottom: 4px; }

/* gatilhos: linhas sem caixa, cada uma com ícone, nome e o controle de 3 opções em vidro */
.ck-gats { margin: 20px 0 0; text-align: left; }
.ck-g { padding: 14px 2px 15px; border-radius: 16px; }
.ck-g + .ck-g { border-top: 1px solid var(--linha); border-radius: 0; }
.ck-g.falta { animation: ckFalta .6s var(--mola); }
@keyframes ckFalta { 30% { background: rgba(255,106,95,.1); transform: translateX(-4px); } 60% { transform: translateX(4px); } }
.ck-g-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.ck-g-cab b { flex: 1; min-width: 0; font-weight: 500; font-size: 16.5px; line-height: 1.3; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.ck-g-ico {
  --gc: var(--gatilho); width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; color: color-mix(in srgb, var(--gc) 75%, #fff);
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--gc) 30%, transparent), color-mix(in srgb, var(--gc) 6%, transparent) 72%);
  border: 1px solid color-mix(in srgb, var(--gc) 40%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  transition: box-shadow .35s, border-color .35s, background .35s, color .35s;
}
.ck-g-ico svg { width: 19px; height: 19px; }
.ck-g[data-v="10"] .ck-g-ico { --gc: var(--verde); box-shadow: 0 0 18px -3px rgba(98,213,157,.7), inset 0 1px 0 rgba(255,255,255,.16); }
.ck-g[data-v="5"] .ck-g-ico { --gc: var(--amarelo); box-shadow: 0 0 18px -3px rgba(244,199,90,.7), inset 0 1px 0 rgba(255,255,255,.16); }
.ck-g[data-v="0"] .ck-g-ico { --gc: var(--vermelho); box-shadow: 0 0 18px -3px rgba(255,106,95,.7), inset 0 1px 0 rgba(255,255,255,.16); }
.ck-tri { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), rgba(12,10,18,.55); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.ck-tri button { height: 44px; font-size: 14px; padding: 0 4px; }
.ck-tri button[aria-checked="true"] { color: var(--txt); }
.ck-tri-pol {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 999px; opacity: 0;
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .45s var(--mola), opacity .25s, background .3s, box-shadow .3s;
}
.ck-g[data-v="10"] .ck-tri-pol { --i: 0; opacity: 1; background: linear-gradient(180deg, rgba(98,213,157,.34), rgba(98,213,157,.14)); box-shadow: inset 0 0 0 1px rgba(98,213,157,.5), inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px -6px rgba(98,213,157,.8); }
.ck-g[data-v="5"] .ck-tri-pol { --i: 1; opacity: 1; background: linear-gradient(180deg, rgba(244,199,90,.34), rgba(244,199,90,.14)); box-shadow: inset 0 0 0 1px rgba(244,199,90,.5), inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px -6px rgba(244,199,90,.8); }
.ck-g[data-v="0"] .ck-tri-pol { --i: 2; opacity: 1; background: linear-gradient(180deg, rgba(255,106,95,.36), rgba(255,106,95,.15)); box-shadow: inset 0 0 0 1px rgba(255,106,95,.5), inset 0 1px 0 rgba(255,255,255,.18), 0 0 18px -6px rgba(255,106,95,.8); }
.ck-gat-bts { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.ck-gat-bts .bt.p { min-height: 44px; }

/* contador */
.ck-cont { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: clamp(22px, 5dvh, 44px); }
.ck-redondo {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--txt);
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)), rgba(14,12,20,.45); border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-luz), 0 10px 26px -12px rgba(0,0,0,.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .15s var(--mola);
}
.ck-redondo svg { width: 26px; height: 26px; }
.ck-redondo:active { transform: scale(.9); }
.ck-cont b {
  position: relative; top: .117em;   /* com altura de linha 1, os algarismos ficam 11 px acima do meio da caixa */
  font: 500 96px/1 var(--serif); min-width: 104px; text-align: center; color: color-mix(in srgb, var(--ck-cor) 55%, #fff);
  font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 0 34px color-mix(in srgb, var(--ck-cor) 55%, transparent);
}
.ck-cont b.pula { animation: ckPula .34s var(--mola); }
.ck-cont-nota { text-align: center; color: var(--txt-3); font: italic 400 17px/1.4 var(--serif); margin: 22px auto 0; max-width: 300px; min-height: 48px; }

/* propósito */
.ck-texto { margin-top: 22px; min-height: 150px; text-align: left; font-size: 16.5px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(12,10,18,.5); }
.ck-texto:focus { border-color: color-mix(in srgb, var(--ck-cor) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ck-cor) 14%, transparent); }
.ck-so-voce { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--txt-3); margin: 12px 0 0; }
.ck-so-voce svg { width: 14px; height: 14px; }

/* folha "Entenda este pilar" */
.ck-entenda-f { text-align: center; padding-top: 8px; }
.ck-entenda-f .ck-ico { width: 56px; height: 56px; margin-bottom: 14px; }
.ck-entenda-f .ck-ico svg { width: 26px; height: 26px; }
.ck-entenda-f .olho { color: var(--ck-cor); margin: 0 0 6px; }
.ck-entenda-f .f-sub { text-align: left; font-size: 16px; line-height: 1.55; margin-top: 12px; }

/* ---------- resumo ---------- */
.ck-res { text-align: center; padding-top: 4px; }
.ck-selo { position: relative; width: 176px; height: 176px; margin: 6px auto 18px; }
.ck-selo > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ck-selo .s-fio { stroke: rgba(240,210,150,.16); stroke-width: 1; stroke-dasharray: 1.5 4.5; }
.ck-selo .s-dir, .ck-selo .s-esq { transform-box: view-box; transform-origin: 100px 100px; filter: drop-shadow(0 0 6px rgba(240,200,120,.45)); }
.ck-selo .s-halo { transform-box: view-box; transform-origin: 100px 100px; }
.ck-selo .s-estrela { position: absolute; left: 50%; top: 8%; transform: translate(-50%, -50%); line-height: 0; z-index: 2; filter: drop-shadow(0 0 14px rgba(255,220,150,.75)); }
.ck-selo .s-onda { position: absolute; left: 50%; top: 8%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1.5px solid rgba(255,226,170,.85); opacity: 0; z-index: 1; }
.ck-selo .s-meio { position: absolute; inset: 22% 18% 16%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ck-selo .s-meio b { font: 500 64px/1 var(--serif); letter-spacing: -.03em; filter: drop-shadow(0 0 16px rgba(240,200,120,.4)); }
.ck-selo .s-meio b[data-dig="3"] { font-size: 50px; } .ck-selo .s-meio b[data-dig="4"] { font-size: 40px; }
.ck-selo .s-meio span:not(.s-ico) { font: 600 10.5px/1.2 var(--cinzel); letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-2); margin-top: 6px; opacity: .9; }
.ck-selo .s-ico { color: #dfe5f5; filter: drop-shadow(0 0 12px rgba(190,205,255,.55)); }
.ck-selo .s-ico svg { width: 46px; height: 46px; }
.ck-selo.prata .s-dir, .ck-selo.prata .s-esq { filter: drop-shadow(0 0 6px rgba(190,205,255,.4)); }
.ck-selo.prata .s-estrela { filter: drop-shadow(0 0 14px rgba(200,212,255,.7)); }
.ck-selo.prata .s-onda { border-color: rgba(214,224,255,.8); }
/* entrada do selo: os crescentes fecham em volta, a estrela acende no alto, a onda se espalha */
.ck-res .s-halo, .ck-res .s-dir, .ck-res .s-esq, .ck-res .s-estrela, .ck-res .s-meio { opacity: 0; }
.ck-res.vivo .s-halo { animation: ckSeloHalo 1.4s ease .1s both; }
.ck-res.vivo .s-dir { animation: ckCrescD .95s var(--mola) .1s both; }
.ck-res.vivo .s-esq { animation: ckCrescE .95s var(--mola) .1s both; }
.ck-res.vivo .s-estrela { animation: ckEstrela .8s var(--mola-salto) .62s both; }
.ck-res.vivo .s-onda { animation: ckOnda 1.2s ease-out .72s both; }
.ck-res.vivo .s-meio { animation: ckSobe .7s var(--mola) .4s both; }
@keyframes ckSeloHalo { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ckCrescD { from { opacity: 0; transform: rotate(38deg) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ckCrescE { from { opacity: 0; transform: rotate(-38deg) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes ckEstrela { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.1) rotate(-60deg); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(6deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes ckOnda { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(5.5); } }
@keyframes ckSobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ck-res > :not(.ck-selo) { opacity: 0; }
.ck-res.vivo > :not(.ck-selo) { animation: ckSobe .7s var(--mola) both; }
.ck-res.vivo > .ck-res-tit { animation-delay: .55s; } .ck-res.vivo > .ck-res-sub { animation-delay: .65s; }
.ck-res.vivo > .ck-sos { animation-delay: .72s; }
.ck-res.vivo > .ck-moedas { animation-delay: .82s; } .ck-res.vivo > .ck-rk { animation-delay: .96s; } .ck-res.vivo > .ck-alerta { animation-delay: 1.08s; }
.ck-res-tit { font: 500 26px/1.18 var(--serif); letter-spacing: -.015em; margin: 0 auto; max-width: 340px; text-wrap: balance; }
.ck-res-sub { color: var(--txt-2); font-size: 15px; line-height: 1.5; margin: 8px auto 0; max-width: 340px; text-wrap: pretty; }
.ck-moedas { display: flex; justify-content: center; align-items: flex-start; gap: 18px; margin: 26px 0 4px; }
.ck-moeda .rotulo-m { font-size: 9.5px; letter-spacing: .1em; max-width: 112px; white-space: nowrap; }
.ck-moeda .ico-m { top: calc(var(--tam) * .16); }
.ck-moeda .valor-m { font-size: calc(var(--tam) * .33); margin-top: calc(var(--tam) * .12); }
/* as três no mesmo metal; o aro de dentro, o ícone e o número levam a cor do eixo (ouro, azul, laranja), como no tríptico da Hoje */
.ck-moeda { --eixo: var(--alma); }
.ck-moeda[data-eixo="mente"] { --eixo: var(--mente); }
.ck-moeda[data-eixo="gatilhos"] { --eixo: var(--gatilho); }
.ck-moeda .disco { --moeda-brilho: color-mix(in srgb, var(--eixo) 40%, transparent); }
.ck-moeda .disco::after { inset: calc(var(--tam) * .105); border: 1.5px solid color-mix(in srgb, var(--eixo) 78%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--eixo) 50%, transparent), inset 0 0 10px color-mix(in srgb, var(--eixo) 28%, transparent); }
.ck-moeda .ico-m { color: color-mix(in srgb, var(--eixo) 85%, #fff); opacity: 1; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--eixo) 70%, transparent)); }
.ck-moeda .valor-m { background: none; -webkit-text-fill-color: currentColor; color: color-mix(in srgb, var(--eixo) 80%, #fff); text-shadow: 0 0 16px color-mix(in srgb, var(--eixo) 45%, transparent); }
.ck-moeda .rotulo-m { color: color-mix(in srgb, var(--eixo) 40%, var(--txt-2)); }
.ck-sos { width: 100%; margin-top: 20px; }

.ck-rk { margin: 30px 0 0; text-align: left; padding: 20px 2px 0; border-top: 1px solid var(--linha); }
/* o risco veste a mesma roupa da Hoje e da Evolução: número serifado com %, nível em Cinzel, valores em sans */
.ck-rk-topo { display: flex; align-items: center; gap: 16px; margin: 12px 0 14px; }
.ck-rk-n { flex: none; font: 400 58px/.9 var(--serif); color: var(--rk); letter-spacing: -.035em; font-variant-numeric: lining-nums; text-shadow: 0 0 30px color-mix(in srgb, var(--rk) 45%, transparent); }
.ck-rk-n small { font-size: 22px; letter-spacing: 0; margin-left: 3px; vertical-align: top; position: relative; top: 7px; opacity: .75; }
.ck-rk-nome { min-width: 0; font: 600 13.5px/1.25 var(--cinzel); letter-spacing: .18em; text-transform: uppercase; color: var(--rk); }
.ck-regua { position: relative; height: 6px; border-radius: 99px; margin: 0 2px; background: linear-gradient(90deg, #62d59d, #9fe0b9 25%, #f4c75a 50%, #f39a5b 72%, #ff6a5f); opacity: .9; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.ck-regua::after { content: ''; position: absolute; inset: -1px; border-radius: 99px; border: 1px solid rgba(255,255,255,.12); }
.ck-regua .r-pos { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 3px solid #14121b; box-shadow: 0 0 0 4px color-mix(in srgb, var(--rk) 40%, transparent), 0 0 18px var(--rk); transition: left 1.3s var(--mola); z-index: 1; }
.ck-fatores { margin-top: 16px; }
.ck-fator { display: flex; align-items: center; gap: 12px; padding: 11px 2px; font-size: 14.5px; line-height: 1.35; color: var(--txt-2); }
.ck-fator + .ck-fator { border-top: 1px solid var(--linha); }
.ck-fator i { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 10px currentColor; }
.ck-fator span { flex: 1; min-width: 0; }
.ck-fator b { font: 600 13.5px/1 var(--sans); color: var(--txt); white-space: nowrap; }
.ck-alerta { margin-top: 22px; text-align: left; border-color: color-mix(in srgb, var(--ouro) 38%, transparent); }
.ck-alerta .rotulo { color: var(--ouro); }
.ck-alerta h3 { font: 500 21px/1.25 var(--serif); }
.ck-alerta p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ck-al-mais { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: 0 0 -12px -2px; padding: 0 2px; color: var(--ouro-2); font-size: 14.5px; font-weight: 600; }
.ck-al-mais svg { width: 16px; height: 16px; }

/* chips (editar gatilhos: aqui e nos Ajustes) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid var(--linha-2); font-size: 15px; font-weight: 500; color: var(--txt-2); transition: background .2s, color .2s, border-color .2s, transform .15s var(--mola), box-shadow .2s; }
.chip svg { width: 17px; height: 17px; }
.chip:active { transform: scale(.95); }
.chip.on { background: color-mix(in srgb, var(--c, var(--ouro)) 16%, rgba(255,255,255,.03)); border-color: color-mix(in srgb, var(--c, var(--ouro)) 50%, transparent); color: var(--txt); box-shadow: 0 0 16px -8px var(--c, var(--ouro)); }
.chip.novo { border-style: dashed; color: var(--ouro); }
.chip-x { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin: 0 -8px 0 0; border-radius: 50%; color: var(--txt-3); }
.chip-x::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.chip-x svg { width: 15px; height: 15px; }
.chip-x:active { background: rgba(255,255,255,.1); }
.pula-gatilho { display: block; margin: 16px auto 0; }

/* telas baixas: a classe vem da altura útil do meio (js/tela-checkin.js, ajustaCk), que já desconta a barra de
   status e o indicador de início. Assim o passo inteiro cabe sem rolar e a dica ganha o espaço que sobra. */
.ck.baixa .ck-ico { width: 46px; height: 46px; margin-bottom: 9px; }
.ck.baixa .ck-ico svg { width: 22px; height: 22px; }
.ck.baixa .ck-eixo { margin-bottom: 8px; }
.ck.baixa .ck-perg { font-size: 25px; }
.ck.baixa .ck-leitura { height: 86px; }
.ck.baixa .ck-v { font-size: 72px; }
.ck.baixa .ck-vazio { top: 24px; }
.ck.baixa .ck-dica { flex-basis: 120px; min-height: 120px; margin-top: 10px; }
.ck.baixa .ck-cont b { font-size: 84px; }
.ck.mini .ck-ico { display: none; }   /* iPhone SE e afins: o ícone sai, o resto aperta */
.ck.mini .ck-perg { font-size: 23.5px; }
.ck.mini .ck-sub { margin-top: 8px; }
.ck.mini .ck-leitura { height: 78px; }
.ck.mini .ck-v { font-size: 64px; }
.ck.mini .ck-vazio { top: 20px; }
.ck.mini .ck-dica { flex-basis: 104px; min-height: 104px; }
.ck.mini .ck-cont { margin-top: 18px; }
@media (max-width: 370px) {
  .ck-meio { padding: 0 18px; }
  .ck-perg { font-size: 26px; }
  .ck-tri button { font-size: 13px; }
  .ck-moedas { gap: 12px; }
}
@media (prefers-reduced-transparency: reduce) {
  .ck-dica .d-vidro, .ck-redondo, .ck-trilho .t-vidro, .ck-tri { background: #15131c; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-res .s-halo, .ck-res .s-dir, .ck-res .s-esq, .ck-res .s-estrela, .ck-res .s-meio, .ck-res > :not(.ck-selo) { opacity: 1; }
  .ck-selo .s-estrela { transform: translate(-50%, -50%); }
  .ck-ceu i { animation: none; }
}