/* slides.css — palco 1600×900 (medidas em px do palco; o JS escala) */
.sl-wrap { position: absolute; inset: 0; background: #0b0510; overflow: hidden; user-select: none; }
.sl-stage { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform-origin: center center; overflow: hidden; background: var(--night); }
.sl-slide { position: absolute; inset: 0; animation: slIn .6s ease both; cursor: pointer; }
.sl-slide.out { animation: slOut .38s ease both; pointer-events: none; }
@keyframes slIn { from { opacity: 0; transform: scale(1.012); } }
@keyframes slOut { to { opacity: 0; } }

.sl-bg { position: absolute; inset: -1.5%; background-size: cover; background-position: center; animation: slKen 20s ease-out both; }
@keyframes slKen { from { transform: scale(1); } to { transform: scale(1.06); } }
.sl-shade { position: absolute; inset: 0; pointer-events: none; }
.sl-shade.left { background: linear-gradient(90deg, rgba(14,7,22,.96) 0%, rgba(14,7,22,.88) 40%, rgba(14,7,22,.35) 68%, rgba(14,7,22,.08) 100%); }
.sl-shade.right { background: linear-gradient(270deg, rgba(14,7,22,.96) 0%, rgba(14,7,22,.88) 40%, rgba(14,7,22,.35) 68%, rgba(14,7,22,.08) 100%); }
.sl-shade.bottom { background: linear-gradient(180deg, rgba(14,7,22,.05) 0%, rgba(14,7,22,.25) 45%, rgba(14,7,22,.93) 86%); }
.sl-shade.bottom.strong { background: linear-gradient(180deg, rgba(14,7,22,.25) 0%, rgba(14,7,22,.45) 40%, rgba(14,7,22,.95) 82%); }
.sl-shade.full { background: radial-gradient(ellipse at 50% 40%, rgba(14,7,22,.72), rgba(14,7,22,.93)); }
.sl-shade.full.soft { background: linear-gradient(180deg, rgba(14,7,22,.9) 0%, rgba(14,7,22,.7) 45%, rgba(14,7,22,.86) 100%); }
.sl-shade.center { background: radial-gradient(ellipse at 50% 50%, rgba(14,7,22,.55) 0%, rgba(14,7,22,.9) 75%); }
.sl-shade.splitshade { background: linear-gradient(180deg, rgba(14,7,22,.65) 0%, rgba(14,7,22,0) 30%, rgba(14,7,22,0) 62%, rgba(14,7,22,.85) 100%); }
.sl-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 70% 30%, rgba(246,185,59,.18), transparent 70%), radial-gradient(ellipse 50% 60% at 15% 85%, rgba(142,79,216,.28), transparent 70%), var(--night); }
.sl-glow.green { background: radial-gradient(ellipse 60% 55% at 50% 20%, rgba(246,185,59,.16), transparent 70%), radial-gradient(ellipse 70% 60% at 50% 110%, rgba(76,194,99,.22), transparent 70%), var(--night); }

.sl-content { position: absolute; inset: 70px 100px 90px; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.sl-content.sl-bottom { justify-content: flex-end; padding-bottom: 10px; }
.sl-content.sl-top { justify-content: flex-start; padding-top: 6px; }
.sl-content.sl-center { align-items: center; text-align: center; }
.sl-col { width: 780px; display: flex; flex-direction: column; gap: 24px; }
.sl-col.wide { width: 1050px; }
.sl-content.is-right .sl-col { margin-left: auto; }
.sl-row { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

.sl-eyebrow { margin: 0; font: 900 24px/1.1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.sl-h1 { margin: 0; font: 900 124px/.96 var(--f-display); letter-spacing: .015em; text-wrap: balance; filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); }
.sl-section-title { font-size: 104px; max-width: 1300px; }
.sl-h2 { margin: 0; font: 900 70px/1.04 var(--f-display); letter-spacing: .015em; color: var(--cream); text-wrap: balance; text-shadow: 0 4px 22px rgba(0,0,0,.5); }
.sl-sub { margin: 0; font: 700 40px/1.25 var(--f-ui); color: var(--cream-dim); text-wrap: balance; }
.sl-line { margin: 0; font: 700 38px/1.32 var(--f-ui); color: var(--cream); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.sl-ask { font: 900 40px/1.25 var(--f-ui); padding: 22px 30px; border-radius: 24px; background: rgba(246,185,59,.14); border: 2px solid rgba(246,185,59,.65); color: var(--gold-2); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.sl-badge { align-self: flex-start; font: 900 24px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; padding: 12px 20px; border-radius: 999px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink); }
.sl-ref { align-self: flex-start; font: 800 32px/1 var(--f-ui); color: var(--gold-2); padding: 10px 18px; border: 2px solid rgba(255,215,122,.5); border-radius: 14px; background: rgba(14,7,22,.5); }
.sl-tip { margin: 0; font: 800 32px/1.3 var(--f-ui); color: var(--gold-2); }

.frag { opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .55s cubic-bezier(.2,1.25,.4,1); }
.frag.on { opacity: 1; transform: none; }

/* chips */
.sl-chips { display: flex; flex-wrap: wrap; gap: 14px; }
.sl-chip { font: 900 32px/1 var(--f-ui); padding: 16px 24px; border-radius: 999px; background: rgba(255,244,224,.1); border: 2px solid rgba(255,244,224,.28); color: var(--cream); }
.sl-chips.is-many .sl-chip { font-size: 28px; padding: 13px 20px; background: rgba(246,185,59,.14); border-color: rgba(246,185,59,.55); color: var(--gold-2); }
.sl-chips.frag .sl-chip { opacity: 0; transform: scale(.7); transition: opacity .35s ease var(--d, 0ms), transform .45s cubic-bezier(.2,1.5,.4,1) var(--d, 0ms); }
.sl-chips.frag.on .sl-chip { opacity: 1; transform: none; }

/* charada */
.sl-bigq { position: absolute; right: 90px; top: 50%; transform: translateY(-52%); font: 900 720px/1 var(--f-display); color: rgba(246,185,59,.09); z-index: 1; }
.sl-clues { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 18px; }
.sl-clues li { font: 800 42px/1.2 var(--f-ui); display: flex; align-items: center; gap: 24px; }
.sl-clue-n { flex: none; font: 900 22px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; padding: 12px 16px; border-radius: 12px; background: var(--grape-deep); color: var(--cream); border: 1px solid rgba(255,255,255,.18); }
.sl-answer { margin-top: 18px; font: 900 64px/1.1 var(--f-display); color: var(--gold-2); }
.sl-answer small { display: block; margin-top: 8px; font: 800 32px/1.2 var(--f-ui); color: var(--cream-dim); }

/* ligado × cortado */
.sl-split-ask { position: absolute; left: 50%; top: 56px; z-index: 3; width: 1180px; margin-left: -590px; text-align: center; font: 900 54px/1.15 var(--f-display); color: var(--gold-2); text-shadow: 0 4px 26px rgba(0,0,0,.8); }
.sl-split-label { position: absolute; bottom: 64px; z-index: 3; width: 620px; padding: 26px 32px; border-radius: 26px; display: grid; gap: 8px; backdrop-filter: blur(4px); }
.sl-split-label b { font: 900 50px/1 var(--f-display); }
.sl-split-label span { font: 800 34px/1.2 var(--f-ui); }
.sl-split-label.is-left { left: 70px; background: rgba(20,60,25,.72); border: 2px solid rgba(110,230,130,.6); color: #eaffef; }
.sl-split-label.is-right { right: 70px; background: rgba(25,25,40,.78); border: 2px solid rgba(170,180,210,.45); color: #e6e9f5; text-align: right; }

/* referência gigante */
.sl-bigref { font: 900 190px/1 var(--f-display); letter-spacing: .01em; margin: 12px 0 4px; }

/* quem é quem + atributos: cartas que viram */
.sl-cards { display: flex; gap: 40px; justify-content: center; margin-top: 30px; }
.sl-card { width: 420px; height: 470px; perspective: 1600px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--cream); font: inherit; }
.sl-card-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .85s cubic-bezier(.3,1.3,.4,1); }
.sl-card.on .sl-card-in { transform: rotateY(180deg); }
.sl-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.sl-card-front { background: radial-gradient(circle at 50% 30%, rgba(176,123,255,.35), transparent 60%), linear-gradient(165deg, #3a1f57, #1d0f2c); border: 3px solid rgba(255,215,122,.45); }
.sl-card-back { transform: rotateY(180deg); background: radial-gradient(circle at 50% 20%, rgba(255,215,122,.3), transparent 60%), linear-gradient(165deg, #4a2f0a, #1f1406); border: 3px solid var(--gold); }
.sl-card-icon { font-size: 110px; line-height: 1; filter: drop-shadow(0 10px 20px rgba(0,0,0,.45)); }
.sl-card-term { font: 900 58px/1 var(--f-display); color: var(--cream); }
.sl-card-hint { font: 800 22px/1 var(--f-ui); color: var(--cream-dim); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.sl-card-kicker { font: 900 24px/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.sl-card-means { font: 900 66px/1.02 var(--f-display); color: var(--gold-2); }
.sl-card-note { font: 700 28px/1.25 var(--f-ui); color: var(--cream); }
.sl-card-ref { font: 900 24px/1 var(--f-ui); color: var(--cream-dim); padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(255,244,224,.25); }
.sl-card-effect { font: 900 40px/1.15 var(--f-ui); color: var(--gold-2); }
.sl-cards.is-attrs { gap: 30px; margin-top: 34px; }
.sl-cards.is-attrs .sl-card { width: 400px; height: 520px; }
.sl-cards.is-attrs.n4 .sl-card { width: 330px; height: 520px; }
.sl-cards.is-attrs.n4 .sl-card-term { font-size: 44px; }
.sl-cards.is-attrs.n4 .sl-card-effect { font-size: 34px; }
.sl-cards.is-attrs .sl-card-back .sl-card-kicker { text-transform: none; letter-spacing: .02em; font-size: 26px; }
.sl-cards.is-attrs .sl-card-icon { font-size: 92px; }
.sl-read { margin-top: 12px; font: 900 22px/1.2 var(--f-ui); padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--tc) 22%, transparent); border: 2px solid var(--tc); color: var(--cream); }

/* versículo */
.sl-verse { margin: 18px 0 0; max-width: 1280px; font: italic 800 60px/1.28 var(--f-ui); color: var(--cream); text-wrap: balance; }
.sl-hl { background: none; color: inherit; border-radius: 10px; transition: color .6s ease, background .6s ease, box-shadow .6s ease; }
.sl-verse.on .sl-hl { color: var(--gold-2); background: rgba(246,185,59,.14); box-shadow: 0 0 0 8px rgba(246,185,59,.14); }
.sl-verse-ref { margin: 4px 0 0; font: 900 46px/1 var(--f-display); color: var(--gold); letter-spacing: .06em; }

/* lista */
.sl-items { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin-top: 26px; }
.sl-item { display: flex; align-items: center; gap: 24px; padding: 22px 26px; border-radius: 24px; background: rgba(45,25,64,.85); border: 1px solid rgba(255,244,224,.16); }
.sl-item-icon { flex: none; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 54px; background: radial-gradient(circle at 35% 30%, rgba(255,215,122,.35), rgba(142,79,216,.35)); border: 2px solid rgba(255,215,122,.5); }
.sl-item b { display: block; font: 900 38px/1.1 var(--f-ui); color: var(--cream); }
.sl-item small { display: block; margin-top: 6px; font: 700 28px/1.2 var(--f-ui); color: var(--cream-dim); }
.sl-think { margin-top: 10px; font: 800 32px/1.3 var(--f-ui); padding: 22px 28px; border-radius: 22px; background: rgba(76,194,99,.14); border: 2px dashed rgba(110,230,130,.55); color: #e6ffe9; }
.sl-result { font: 900 44px/1.1 var(--f-display); color: var(--gold-2); }

/* jogo */
.sl-game-desc { max-width: 1150px; color: var(--cream); }
.sl-go { margin-top: 16px; }
.sl-t-game .btn-xl { font-size: 44px; padding: 26px 64px; border-radius: 26px; }
.sl-epic { font-size: 150px; animation: slPulse 2.4s ease-in-out infinite; }
@keyframes slPulse { 50% { filter: drop-shadow(0 0 28px rgba(246,185,59,.55)); } }
.sl-rays { position: absolute; left: 50%; top: 40%; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; background: repeating-conic-gradient(from 0deg, rgba(246,185,59,.10) 0deg 8deg, transparent 8deg 20deg); animation: slSpin 40s linear infinite; mask-image: radial-gradient(circle, black 10%, transparent 55%); -webkit-mask-image: radial-gradient(circle, black 10%, transparent 55%); z-index: 1; }
@keyframes slSpin { to { transform: rotate(360deg); } }

/* perguntas da vida real */
.sl-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.sl-qa-item { display: grid; gap: 14px; padding: 26px 30px; border-radius: 26px; background: rgba(45,25,64,.88); border: 1px solid rgba(255,244,224,.16); min-height: 190px; align-content: start; }
.sl-qa-item b { font: 900 42px/1.15 var(--f-ui); color: var(--cream); }
.sl-qa-item span { font: 800 32px/1.25 var(--f-ui); color: var(--gold-2); }

/* aplicação */
.sl-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; }
.sl-option { display: grid; gap: 14px; align-content: start; padding: 34px 30px; border-radius: 28px; background: rgba(33,18,46,.88); border: 2px solid rgba(255,215,122,.35); min-height: 380px; }
.sl-option .sl-option-icon { font-size: 84px; line-height: 1; }
.sl-option b { font: 900 42px/1.08 var(--f-display); color: var(--gold-2); }
.sl-option span { font: 700 30px/1.3 var(--f-ui); color: var(--cream); }
.sl-t-apply .sl-tip { margin-top: 26px; }

/* complete o versículo */
.sl-fill { margin: 30px 0 18px; max-width: 1300px; font: italic 800 58px/1.5 var(--f-ui); color: var(--cream); text-wrap: balance; }
.sl-blank { display: inline-block; min-width: 230px; border-bottom: 6px solid var(--gold); margin: 0 6px; text-align: center; font-style: normal; color: var(--gold-2); cursor: pointer; }
.sl-blank span { opacity: 0; transition: opacity .4s ease; }
.sl-blank.on span { opacity: 1; }

/* encerramento */
.sl-closing-title { font-size: 104px; }
.sl-prayer { margin: 10px 0 8px; max-width: 1150px; font: italic 700 40px/1.4 var(--f-ui); color: var(--cream); padding: 30px 40px; border-radius: 28px; background: rgba(14,7,22,.6); border: 1px solid rgba(255,244,224,.2); }

.sl-award { font-size: 30px; padding: 16px 28px; border-radius: 18px; }

/* controles, progresso, mini placar, tela preta */
.sl-controls { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; border-radius: 1rem; background: rgba(23,13,34,.86); border: 1px solid var(--line); box-shadow: var(--shadow); transition: opacity .4s ease, transform .4s ease; }
.sl-count { min-width: 5.2em; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--cream-dim); }
.sl-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,244,224,.06); z-index: 15; }
.sl-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--leaf), var(--gold)); transition: width .5s ease; }
.sl-mini { position: absolute; top: .8rem; right: .9rem; z-index: 20; display: flex; gap: .4rem; cursor: pointer; transition: opacity .4s ease; }
.sl-mini-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem .25rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--tc) 20%, rgba(23,13,34,.85)); border: 2px solid color-mix(in srgb, var(--tc) 70%, transparent); font-weight: 900; }
.sl-mini-chip b { color: var(--tc); font-variant-numeric: tabular-nums; }
.sl-wrap.idle .sl-controls { opacity: 0; transform: translate(-50%, 1rem); pointer-events: none; }
.sl-wrap.idle { cursor: none; }
.sl-black { position: absolute; inset: 0; background: #000; z-index: 30; cursor: pointer; }

.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .6rem; text-align: left; }
.sl-grid-item { display: flex; gap: .6rem; align-items: center; padding: .6rem .7rem; border-radius: .8rem; background: rgba(255,244,224,.06); border: 1px solid var(--line); color: var(--cream); font-weight: 800; }
.sl-grid-item .n { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .5rem; background: var(--grape-deep); font-weight: 900; }
.sl-grid-item .t { font-size: .9rem; line-height: 1.2; }
.sl-grid-item.is-cur { border-color: var(--gold); background: rgba(246,185,59,.14); }