/* Jogos Bíblicos — visual compartilhado
   Verde profundo · pergaminho · dourado */
@font-face { font-family: 'Lora'; src: url('Lora-Variable.woff') format('woff'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('Lora-Italic-Variable.woff') format('woff'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('Cinzel-Variable.woff') format('woff'); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  --green-950: #0a1c14; --green-900: #0f281c; --green-800: #163826; --green-700: #1e4a33; --green-600: #2a5e42; --green-500: #3b7454;
  --gold-800: #6e5216; --gold-700: #8a6a24; --gold-600: #a8842f; --gold-500: #c49a3e; --gold-400: #d8b25c; --gold-300: #e9cf8c; --gold-200: #f4e4b6;
  --parch-50: #fdf9ef; --parch-100: #f8f0dc; --parch-200: #f0e3c4; --parch-300: #e5d3a8; --parch-edge: #cfb47e;
  --ink-900: #2a2015; --ink-700: #4a3a27; --ink-500: #6f5c42; --ink-400: #8c7859;
  --ok: #3f7a4f; --bad: #b4553f;
  --serif: 'Lora', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --display: 'Cinzel', 'Lora', 'Iowan Old Style', Georgia, serif;
  --radius: 18px; --radius-sm: 12px;
  --shadow: 0 10px 30px -12px rgba(30, 20, 5, .45), 0 2px 6px -2px rgba(30, 20, 5, .25);
  --shadow-soft: 0 6px 18px -10px rgba(30, 20, 5, .4);
  --gold-grad: linear-gradient(180deg, #f6e2a6 0%, #e2bd66 38%, #c4983c 70%, #a47b2a 100%);
  --green-grad: linear-gradient(180deg, #2a5e42 0%, #1a432e 55%, #123222 100%);
  --fs: 18px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}
html.big { --fs: 21px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { font-size: var(--fs); background: var(--green-950); overflow-x: hidden; }
body {
  font-family: var(--serif); color: var(--ink-900); line-height: 1.45; min-height: 100vh; min-height: 100dvh;
  background: var(--green-950) url('jardim.svg') center top / cover fixed;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; /* clip (e não hidden) para o teclado sticky grudar na tela */
}
body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(10, 28, 20, .18), rgba(10, 28, 20, .7) 50%, rgba(10, 28, 20, .9)); pointer-events: none; z-index: 0; }
body[data-scene] { background-image: var(--scene); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#app { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding-block: calc(var(--safe-top) + 8px) calc(var(--safe-bottom) + 28px); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
#app.wide { max-width: 1180px; }
.screen { animation: enter .35s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Superfícies ---------- */
.parch {
  background: var(--paper-noise), radial-gradient(120% 90% at 50% 0%, var(--parch-50) 0%, var(--parch-100) 55%, var(--parch-200) 100%);
  border: 1px solid rgba(207, 180, 126, .75); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 4px rgba(255, 255, 255, .18);
}
.dark-card { background: linear-gradient(180deg, rgba(31, 74, 51, .92), rgba(15, 40, 28, .94)); border: 1px solid rgba(216, 178, 92, .45); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--parch-100); }
.gold-text { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--gold-500); justify-content: center; margin: 14px 0; }
.divider::before, .divider::after { content: ''; height: 1px; flex: 0 1 70px; background: linear-gradient(90deg, transparent, var(--gold-500), transparent); }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 16px; font-weight: 600; font-size: 1rem; letter-spacing: .01em; transition: transform .12s ease, filter .2s; user-select: none; -webkit-user-select: none; }
.btn:active { transform: scale(.97); }
.btn-green { background: var(--green-grad); color: var(--parch-50); border: 1px solid rgba(216, 178, 92, .55); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-gold { background: var(--gold-grad); color: #3b2a0c; border: 1px solid #a47b2a; box-shadow: 0 8px 18px -8px rgba(90, 60, 10, .6), inset 0 1px 0 rgba(255, 255, 255, .55); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.btn-ghost { background: rgba(255, 255, 255, .55); color: var(--ink-700); border: 1px solid var(--parch-edge); }
.btn-block { width: 100%; }
.icon-btn { width: 50px; height: 50px; border-radius: 15px; display: inline-grid; place-items: center; flex: none; background: rgba(255, 250, 235, .1); border: 1px solid rgba(216, 178, 92, .5); color: var(--gold-300); transition: transform .12s; }
.icon-btn:active { transform: scale(.94); }
.icon-btn.light { background: rgba(255, 255, 255, .6); color: var(--ink-700); border-color: var(--parch-edge); }
.icon-btn svg, .btn svg { width: 24px; height: 24px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; }

/* ---------- Barra superior ---------- */
.topbar { display: flex; align-items: center; gap: 10px; padding: 6px 0 12px; color: var(--parch-50); }
.topbar .ttl { flex: 1; min-width: 0; text-align: center; }
.topbar .ttl b { display: block; font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: .04em; color: var(--gold-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .ttl small { display: block; font-size: .78rem; color: rgba(248, 240, 220, .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Hero ---------- */
.hero { position: relative; border-radius: 26px; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 26px 20px 22px; color: var(--parch-50); box-shadow: var(--shadow); border: 1px solid rgba(216, 178, 92, .45); background: var(--green-900) center / cover no-repeat; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 14, .05) 0%, rgba(10, 20, 14, .34) 42%, rgba(10, 24, 16, .86) 100%); }
.hero > * { position: relative; z-index: 1; }
.hero .cross { width: 34px; height: 46px; margin-bottom: 8px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.hero h1 { font-family: var(--display); font-size: 2.05rem; letter-spacing: .03em; font-weight: 700; text-shadow: 0 3px 14px rgba(0, 0, 0, .55); }
.hero h1 .gold-text { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.hero .kicker { font-family: var(--display); letter-spacing: .28em; font-size: .72rem; color: var(--gold-300); margin-top: 8px; }
.hero .sub { margin-top: 6px; font-size: .95rem; color: rgba(253, 249, 239, .92); }
.verse { margin: 16px auto 0; max-width: 470px; padding: 14px 18px; text-align: center; font-style: italic; font-size: .95rem; color: var(--ink-700); }
.verse cite { display: block; margin-top: 6px; font-style: normal; font-size: .8rem; color: var(--gold-700); font-weight: 600; letter-spacing: .03em; }
.hero .verse { background: rgba(248, 240, 220, .92); border-radius: 14px; border: 1px solid rgba(216, 178, 92, .6); }

.signature { text-align: center; color: rgba(248, 240, 220, .92); margin: 22px 0 6px; font-size: .92rem; }
.signature b { display: block; font-weight: 600; color: var(--parch-50); }
.signature i { color: rgba(248, 240, 220, .8); }
.signature a.sig-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }

/* ---------- Hub ---------- */
.continue { display: flex; align-items: center; gap: 14px; padding: 14px; margin-top: 16px; text-align: left; width: 100%; }
.continue .thumb { width: 64px; height: 64px; border-radius: 14px; flex: none; background: center / cover; border: 1px solid var(--parch-edge); display: grid; place-items: center; font-size: 1.6rem; }
.continue .txt { flex: 1; min-width: 0; }
.continue .txt small { display: block; color: var(--gold-700); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.continue .txt b { display: block; font-size: 1.05rem; }
.continue .txt span { color: var(--ink-500); font-size: .85rem; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; color: var(--parch-50); margin: 26px 4px 12px; }
.section-title h2 { font-family: var(--display); font-size: 1.15rem; letter-spacing: .05em; color: var(--gold-300); }
.section-title span { font-size: .85rem; color: rgba(248, 240, 220, .75); }
.game-card { position: relative; display: block; width: 100%; text-align: left; border-radius: 22px; overflow: hidden; margin-bottom: 14px; min-height: 168px; color: var(--parch-50); box-shadow: var(--shadow); border: 1px solid rgba(216, 178, 92, .55); background: var(--green-900) center / cover; transition: transform .15s; }
.game-card:active { transform: scale(.985); }
.game-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 26, 18, .92) 0%, rgba(10, 26, 18, .72) 55%, rgba(10, 26, 18, .15) 100%); }
.game-card .in { position: relative; z-index: 1; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; height: 100%; }
.game-card .gicon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--gold-grad); color: #3b2a0c; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5); }
.game-card .gicon svg { width: 30px; height: 30px; }
.game-card h3 { font-family: var(--display); font-size: 1.3rem; letter-spacing: .03em; margin-top: 6px; }
.game-card p { font-size: .88rem; color: rgba(248, 240, 220, .85); max-width: 70%; }
.game-card .meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; max-width: calc(100% - 120px); }
.bar { flex: 1; max-width: 190px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #8fbf6e, #d8b25c); }
.game-card .meta span { font-size: .8rem; font-weight: 600; color: var(--gold-300); }
.game-card .go { position: absolute; right: 16px; bottom: 16px; z-index: 1; }
.footer-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.footer-links .btn { min-height: 48px; font-size: .9rem; padding: 0 16px; background: rgba(255, 250, 235, .1); color: var(--parch-100); border: 1px solid rgba(216, 178, 92, .45); }
.credit { text-align: center; font-size: .72rem; color: rgba(248, 240, 220, .55); margin-top: 16px; }

/* ---------- Listas de jornadas / arcos ---------- */
.journey { margin-bottom: 12px; overflow: hidden; border-radius: 20px; border: 1px solid rgba(216, 178, 92, .55); box-shadow: var(--shadow-soft); background: rgba(14, 36, 25, .9); color: var(--parch-50); }
.journey-head { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 14px; text-align: left; min-height: 82px; }
.journey-head::before { content: ''; position: absolute; inset: 0 0 0 38%; background: var(--scene) center / cover; opacity: .75; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.journey-head > * { position: relative; }
.medal { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--gold-300); background: radial-gradient(circle at 50% 35%, #2a5e42, #0f281c); border: 2px solid var(--gold-500); box-shadow: 0 0 0 3px rgba(196, 154, 62, .2), inset 0 2px 4px rgba(0, 0, 0, .4); }
.medal.done { background: var(--gold-grad); color: #3b2a0c; }
.journey-head .txt { flex: 1; min-width: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.journey-head .txt b { display: block; font-size: 1.08rem; color: var(--gold-200); font-weight: 600; }
.journey-head .txt span { font-size: .82rem; color: rgba(248, 240, 220, .85); }
.journey-head .count { font-size: .8rem; font-weight: 700; color: var(--gold-200); background: rgba(10, 26, 18, .65); border: 1px solid rgba(216, 178, 92, .5); padding: 3px 10px; border-radius: 999px; }
.chev { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 26, 18, .6); border: 1px solid rgba(216, 178, 92, .5); color: var(--gold-300); transition: transform .25s; flex: none; }
.journey.open .chev { transform: rotate(90deg); }
.journey-body { display: none; padding: 6px 14px 16px; }
.journey.open .journey-body { display: block; animation: enter .3s ease both; }
.phase-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 10px; justify-items: center; }
.phase-dot { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--gold-200); background: radial-gradient(circle at 50% 30%, #24533a, #0f2a1d); border: 2px solid rgba(216, 178, 92, .75); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45); transition: transform .12s; }
.phase-dot:active { transform: scale(.93); }
.phase-dot.special { background: var(--gold-grad); color: #3b2a0c; border-color: #a47b2a; }
.phase-dot.done::after { content: '✓'; position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #3f7a4f; color: #fff; font-family: var(--serif); font-size: .72rem; border: 2px solid var(--parch-100); }
.phase-dot.next { box-shadow: 0 0 0 4px rgba(233, 207, 140, .35), inset 0 2px 5px rgba(0, 0, 0, .45); animation: pulse 2s ease-in-out infinite; }
.phase-dot .star { position: absolute; top: -9px; font-size: .75rem; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(233, 207, 140, .12), inset 0 2px 5px rgba(0, 0, 0, .45); } }
.journey-body .verse { background: rgba(248, 240, 220, .1); color: rgba(248, 240, 220, .9); border-radius: 12px; margin-top: 14px; padding: 10px 14px; font-size: .85rem; }
.journey-body .verse cite { color: var(--gold-300); }

/* ---------- Jogo: cabeçalho comum ---------- */
.play-head { padding: 16px 18px; margin-bottom: 12px; }
.play-head .kick { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); font-weight: 700; }
.play-head h2 { font-size: 1.45rem; margin-top: 2px; color: var(--green-800); }
.play-head p { color: var(--ink-500); font-size: .88rem; margin-top: 4px; }
.play-head .row { display: flex; align-items: center; gap: 12px; }
.progress-badge { display: flex; align-items: center; gap: 8px; flex: none; }
.progress-badge .ring { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold-500) calc(var(--p) * 1%), rgba(196, 154, 62, .2) 0); }
.progress-badge .ring span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--parch-50); font-size: .78rem; font-weight: 700; color: var(--green-800); }

/* ---------- Caça-palavras ---------- */
.ws-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ws-layout > * { min-width: 0; }
.ws-board { padding: 10px; border-radius: 20px; }
.ws-stage { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ws-grid { display: grid; gap: 0; position: relative; z-index: 2; }
.ws-cell { min-width: 0; overflow: hidden; aspect-ratio: 1; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; color: var(--ink-900); font-size: calc(var(--cell) * .54); line-height: 1; border-radius: 6px; transition: color .2s, transform .15s; }
.ws-cell.hint { animation: hint 1.2s ease-in-out 3; }
@keyframes hint { 50% { background: rgba(233, 207, 140, .9); transform: scale(1.15); } }
.ws-tiles { position: absolute; inset: 0; display: grid; z-index: 0; pointer-events: none; }
.ws-tiles i { margin: 1.5px; border-radius: 7px; background: linear-gradient(180deg, rgba(255, 253, 246, .95), rgba(246, 236, 212, .95)); box-shadow: inset 0 -1px 0 rgba(160, 130, 70, .25), 0 1px 1px rgba(120, 90, 40, .12); }
.ws-marks { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.ws-marks .cap { stroke-linecap: round; fill: none; }
.ws-marks .live { stroke: rgba(216, 178, 92, .75); }
.ws-words { padding: 14px 14px 16px; }
.ws-words .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ws-words .head h3 { font-size: 1.05rem; color: var(--green-800); }
.chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.chips { grid-auto-flow: row dense; }
.chip.long { grid-column: span 2; }
.chip { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; min-height: 48px; padding: 6px 12px; border-radius: 13px; background: rgba(255, 255, 255, .62); border: 1px solid var(--parch-300); font-weight: 600; font-size: .92rem; letter-spacing: .03em; color: var(--ink-700); text-align: left; }
.chip .ck { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.5px solid var(--parch-edge); }
.chip.found { background: var(--c); border-color: var(--cs); color: var(--green-900); }
.chip.found .ck { background: var(--ok); border-color: var(--ok); color: #fff; }
.chip.found .ck::before { content: '✓'; font-size: .7rem; }
.chip.flash { animation: flash .8s ease; }
@keyframes flash { 30% { transform: scale(1.06); } }
.discovery { padding: 16px 18px; position: relative; overflow: hidden; }
.discovery .lbl { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); font-weight: 700; }
.discovery h3 { font-family: var(--display); font-size: 1.6rem; color: var(--green-800); letter-spacing: .04em; margin: 4px 0 6px; }
.discovery p { color: var(--ink-700); font-size: .95rem; }
.discovery .ref { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--gold-700); font-weight: 600; font-size: .85rem; }
.discovery .ref svg { width: 20px; height: 20px; }
.discovery.empty h3 { font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0; }
.discovery.pop { animation: pop .45s ease; }
@keyframes pop { 0% { transform: scale(.97); } 50% { transform: scale(1.015); } }
.verse-foot { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-top: 12px; }
.verse-foot .ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--gold-grad); color: #3b2a0c; }
.verse-foot .ic svg { width: 22px; height: 22px; }
.verse-foot p { font-style: italic; font-size: .85rem; color: var(--ink-700); }
.verse-foot cite { display: block; font-style: normal; font-weight: 600; color: var(--gold-700); font-size: .78rem; margin-top: 2px; }

/* ---------- Palavra cruzada ---------- */
.cw-info { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; }
.cw-info .ic { width: 52px; height: 52px; flex: none; }
.cw-info .txt { flex: 1; min-width: 0; }
.cw-info .txt b { display: block; font-size: 1.05rem; color: var(--green-800); }
.cw-info .txt span { font-size: .82rem; color: var(--ink-500); }
.cw-info .cnt { text-align: center; padding-left: 12px; border-left: 1px solid var(--parch-300); min-width: 76px; }
.cw-info .cnt b { font-size: 1.05rem; color: var(--green-800); display: block; }
.cw-info .cnt span { font-size: .72rem; color: var(--ink-500); }
.cw-info .cnt .bar { height: 6px; margin-top: 4px; background: rgba(160, 130, 70, .2); }
.cw-board { position: relative; padding: 14px; border-radius: 22px; background: radial-gradient(120% 100% at 50% 0%, #24543b, #123222 70%); border: 1px solid rgba(216, 178, 92, .55); box-shadow: var(--shadow), inset 0 0 40px rgba(0, 0, 0, .35); display: flex; justify-content: center; }
.cw-grid { display: grid; gap: 3px; user-select: none; -webkit-user-select: none; }
.cw-cell { position: relative; width: var(--cell); height: var(--cell); border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: calc(var(--cell) * .56); color: var(--ink-900); background: linear-gradient(180deg, #fffaf0, #f1e6cb); box-shadow: inset 0 -2px 0 rgba(150, 120, 60, .3), 0 2px 3px rgba(0, 0, 0, .3); transition: background .15s, transform .12s; touch-action: manipulation; }
.cw-cell.void { background: none; box-shadow: none; pointer-events: none; }
.cw-cell .num { position: absolute; top: 1px; left: 3px; font-size: max(9px, calc(var(--cell) * .27)); font-weight: 700; color: var(--gold-700); line-height: 1; }
.cw-cell.inword { background: linear-gradient(180deg, #fff6d2, #f3df9e); }
.cw-cell.cur { background: linear-gradient(180deg, #ffe58f, #e9c45a); transform: scale(1.06); z-index: 2; box-shadow: 0 0 0 2px #fff7d6, 0 4px 10px rgba(0, 0, 0, .35); }
.cw-cell.solved { background: linear-gradient(180deg, #e7f1da, #c9dfb4); color: var(--green-800); }
.cw-cell.wrong { color: var(--bad); animation: shake .4s; }
.cw-cell.revealed { color: var(--gold-700); }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.cw-clue { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 4px 4px; border-radius: 16px; }
.cw-tools { margin-top: 12px; }
.cw-clue .nav { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--green-grad); color: var(--gold-300); border: 1px solid var(--gold-600); }
.cw-clue .nav svg { width: 22px; height: 22px; }
.cw-clue .mid { flex: 1; text-align: center; min-width: 0; }
.cw-clue .mid b { display: block; font-size: .95rem; color: var(--ink-900); font-weight: 600; line-height: 1.3; }
.cw-clue .mid .len { display: inline-block; margin-top: 6px; padding: 2px 12px; border-radius: 999px; background: #dbe8cf; color: var(--green-800); font-size: .78rem; font-weight: 700; }
.cw-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.cw-tools .btn { flex: 1; min-height: 46px; font-size: .85rem; padding: 0 10px; }
.kb { display: grid; gap: 7px; padding: 10px 6px calc(10px + var(--safe-bottom)); border-radius: 20px 20px 0 0; position: sticky; bottom: 0; z-index: 5; background: linear-gradient(180deg, rgba(20, 52, 36, .97), rgba(12, 34, 23, .98)); border: 1px solid rgba(216, 178, 92, .4); border-bottom: 0; margin: 0 -16px calc(-28px - var(--safe-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); }
.kb-row { display: flex; gap: 5px; justify-content: center; }
.key { flex: 1; max-width: 46px; height: 54px; border-radius: 10px; font-weight: 700; font-size: 1.15rem; color: var(--ink-900); background: linear-gradient(180deg, #fffaf0, #eadbb8); box-shadow: 0 3px 0 #b39a68, 0 4px 6px rgba(0, 0, 0, .35); user-select: none; -webkit-user-select: none; }
.key:active, .key.down { transform: translateY(2px); box-shadow: 0 1px 0 #b39a68; background: #f3dc9a; }
.key.wide { max-width: 70px; flex: 1.5; display: grid; place-items: center; }
.key.go { background: var(--green-grad); color: var(--gold-300); box-shadow: 0 3px 0 #0a1c14, 0 4px 6px rgba(0, 0, 0, .35); border: 1px solid var(--gold-600); }
.key svg { width: 24px; height: 24px; }
.arc-head { text-align: center; padding: 22px 18px 18px; }
.arc-head .ic { width: 72px; height: 72px; margin: 0 auto 6px; }
.arc-head h2 { font-size: 1.7rem; color: var(--green-800); }
.arc-head b { display: block; font-size: 1.05rem; margin-top: 2px; color: var(--ink-700); }
.arc-head p { color: var(--ink-500); font-size: .9rem; margin-top: 8px; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0; }
.tile { min-width: 0; position: relative; aspect-ratio: .82; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(180deg, #fffaf0, #efe2c3); border: 1px solid var(--parch-edge); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35), inset 0 1px 0 #fff; transition: transform .12s; }
.tile:active { transform: scale(.95); }
.tile b { font-family: var(--display); font-size: 1.35rem; color: var(--ink-900); }
.tile .stars { font-size: .72rem; letter-spacing: -1px; color: var(--gold-500); }
.tile .stars .off { color: rgba(160, 130, 70, .35); }
.tile.special { background: var(--gold-grad); border-color: #a47b2a; }
.tile.special .stars { color: #6e5216; } .tile.special .stars .off { color: rgba(90, 60, 10, .3); }
.tile.next { box-shadow: 0 0 0 3px rgba(233, 207, 140, .8), 0 4px 10px -4px rgba(0, 0, 0, .35); }
.tile .crown { font-size: 1rem; line-height: 1; }
.chart { padding: 14px 16px 16px; }
.chart h3 { font-size: 1rem; color: var(--ink-900); }
.chart small { color: var(--ink-500); font-size: .8rem; }
.chart .bars { display: grid; grid-template-columns: repeat(10, 1fr); align-items: end; gap: 6px; height: 120px; margin-top: 12px; }
.chart .bars div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; font-size: .72rem; color: var(--ink-500); }
.chart .bars i { width: 100%; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #5f9a63, #2f6b45); }
.chart .bars i.sp { background: var(--gold-grad); }
.chart .labels { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; text-align: center; font-size: .72rem; color: var(--ink-500); margin-top: 4px; }
.arc-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; margin-bottom: 12px; text-align: left; }
.arc-card .ic { width: 58px; height: 58px; flex: none; }
.arc-card .txt { flex: 1; min-width: 0; }
.arc-card .txt b { font-size: 1.15rem; color: var(--ink-900); display: block; }
.arc-card .txt strong { display: block; font-weight: 600; color: var(--ink-700); font-size: .95rem; }
.arc-card .txt span { font-size: .8rem; color: var(--ink-500); }
.arc-card .meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.arc-card .meta .bar { background: rgba(160, 130, 70, .22); max-width: none; }
.arc-card .meta em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--ink-500); }
.arc-card .chev { background: var(--green-grad); }
.arc-card.cur { outline: 3px solid rgba(233, 207, 140, .9); outline-offset: -1px; }

/* ---------- Solitário ---------- */
.so-top { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 10px; }
.so-moves { color: var(--parch-50); line-height: 1.1; }
.so-moves b { font-size: 1.6rem; display: block; color: var(--gold-300); font-family: var(--display); }
.so-moves span { font-size: .78rem; color: rgba(248, 240, 220, .8); }
.so-deck { display: flex; gap: 8px; align-items: flex-start; justify-content: flex-end; }
.so-table { padding: 12px 10px 14px; border-radius: 22px; background: radial-gradient(130% 90% at 50% 0%, rgba(42, 94, 66, .95), rgba(14, 40, 27, .97)); border: 1px solid rgba(216, 178, 92, .5); box-shadow: var(--shadow), inset 0 0 50px rgba(0, 0, 0, .3); }
.so-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.so-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: start; min-height: 260px; }
.so-col { min-width: 0; position: relative; min-height: var(--ch); border-radius: 12px; }
.so-col.empty { border: 2px dashed rgba(216, 178, 92, .35); }
.slot { min-width: 0; overflow: hidden; position: relative; height: var(--ch); border-radius: 12px; border: 2px dashed rgba(216, 178, 92, .45); display: grid; place-items: center; text-align: center; color: rgba(233, 207, 140, .8); font-size: 10px; letter-spacing: .04em; padding: 4px; text-transform: uppercase; line-height: 1.3; }
.slot.filled { border: 0; }
.slot .plus { font-size: 1.4rem; display: block; color: var(--gold-400); }
.card { position: absolute; left: 0; right: 0; height: var(--ch); border-radius: 12px; background: linear-gradient(180deg, #fffbf1, #f2e6c9); border: 1px solid #cdb27e; box-shadow: 0 2px 4px rgba(0, 0, 0, .3), inset 0 1px 0 #fff; display: flex; flex-direction: column; align-items: center; padding: 6px 4px 4px; overflow: hidden; transition: transform .18s ease, box-shadow .18s; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.card .nm { font-weight: 700; font-size: .7rem; letter-spacing: .02em; text-align: center; line-height: 1.12; color: var(--ink-900); width: 100%; white-space: nowrap; overflow: hidden; }
.card.theme .nm { white-space: normal; }
.card .em { font-size: calc(var(--ch) * .36); line-height: 1; margin-top: auto; margin-bottom: auto; filter: saturate(.92); }
.card::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--band, transparent); opacity: .8; }
.card.theme { background: linear-gradient(180deg, #f8e3a4, #d9b154 60%, #c39a3d); border-color: #a47b2a; }
.card.theme .nm { color: #3b2a0c; font-size: .62rem; }
.card.theme .em { font-size: calc(var(--ch) * .22); margin: 2px 0; }
.card.theme .cnt { flex: none; font-weight: 700; font-size: .78rem; color: #3b2a0c; background: rgba(255, 250, 230, .6); border-radius: 999px; padding: 1px 8px; margin-top: 2px; }
.card.theme .crown { font-size: .8rem; line-height: 1; margin-bottom: 1px; }
.card.back { background: radial-gradient(circle at 50% 40%, #2c6448, #133524 75%); border: 2px solid #b8913c; box-shadow: inset 0 0 0 3px #133524, inset 0 0 0 4px rgba(216, 178, 92, .6), 0 2px 4px rgba(0, 0, 0, .35); }
.card.back::after { content: '✝'; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(233, 207, 140, .75); font-size: 1.1rem; }
.card.back::before { display: none; }
.card.sel { transform: translateY(-6px); box-shadow: 0 0 0 3px #ffe58f, 0 10px 18px rgba(0, 0, 0, .45); z-index: 30 !important; }
.card.hint-src { animation: hintc 1s ease-in-out 3; }
.slot.hint-dst, .so-col.hint-dst { box-shadow: 0 0 0 3px #ffe58f; border-radius: 12px; }
@keyframes hintc { 50% { box-shadow: 0 0 0 4px #ffe58f, 0 0 20px #ffe58f; } }
.card.nope { animation: shake .35s; }
.stock { position: relative; width: 68px; height: var(--ch); }
.stock .card { position: absolute; }
.stock .left { position: absolute; right: -6px; top: -8px; z-index: 5; min-width: 26px; height: 26px; border-radius: 13px; background: var(--parch-50); color: var(--green-800); font-size: .75rem; font-weight: 700; display: grid; place-items: center; border: 1px solid var(--gold-600); }
.stock.empty .recycle { position: absolute; inset: 0; border-radius: 12px; border: 2px dashed rgba(216, 178, 92, .6); display: grid; place-items: center; color: var(--gold-300); font-size: .62rem; text-align: center; padding: 4px; }
.waste { position: relative; width: 92px; height: var(--ch); }
.waste .card { width: 68px; }
.so-bottom { margin-top: 12px; padding: 12px 14px; }
.so-bottom h4 { margin: 0 0 6px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700); }
.done-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.done-chips span { padding: 4px 10px; border-radius: 999px; background: #e3eed7; color: var(--green-800); font-size: .78rem; font-weight: 600; border: 1px solid #b9d0a4; }
.so-tools { display: flex; gap: 8px; margin-top: 12px; }
.so-tools .btn { flex: 1; min-height: 50px; font-size: .9rem; padding: 0 8px; }
.level-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.level { position: relative; aspect-ratio: .78; border-radius: 14px; overflow: hidden; background: center / cover; border: 1px solid rgba(216, 178, 92, .6); color: var(--parch-50); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 8px 4px; box-shadow: var(--shadow-soft); transition: transform .12s; }
.level:active { transform: scale(.95); }
.level::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 26, 18, .1), rgba(10, 26, 18, .85)); }
.level > * { position: relative; }
.level b { font-family: var(--display); font-size: 1.5rem; color: var(--gold-200); }
.level small { font-size: .66rem; color: rgba(248, 240, 220, .85); }
.level.done .ok { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: #3f7a4f; color: #fff; display: grid; place-items: center; font-size: .75rem; border: 2px solid var(--parch-100); }
.level.next { box-shadow: 0 0 0 3px rgba(233, 207, 140, .9); }
.howto { padding: 14px 16px; margin-top: 14px; }
.howto h3 { font-size: 1rem; color: var(--green-800); margin-bottom: 6px; }
.howto ol { margin: 0; padding-left: 20px; color: var(--ink-700); font-size: .9rem; }
.howto li { margin: 3px 0; }

/* ---------- Modal / folha / aviso ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(6, 16, 11, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .2s ease both; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(440px, 100%); max-height: 86vh; overflow: auto; padding: 24px 20px 20px; text-align: center; animation: rise .3s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes rise { from { transform: translateY(24px) scale(.96); opacity: 0; } }
.modal .badge { width: 84px; height: 84px; margin: -6px auto 8px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); box-shadow: 0 10px 24px -8px rgba(120, 80, 10, .7), inset 0 2px 0 rgba(255, 255, 255, .5); font-size: 2.4rem; }
.modal h2 { font-family: var(--display); color: var(--green-800); font-size: 1.6rem; }
.modal p { color: var(--ink-700); margin-top: 8px; }
.modal .stars-big { font-size: 2rem; letter-spacing: 4px; margin: 6px 0; color: var(--gold-500); }
.modal .stars-big .off { color: rgba(160, 130, 70, .3); }
.modal .actions { display: grid; gap: 10px; margin-top: 18px; }
.modal .learned { text-align: left; margin-top: 12px; display: grid; gap: 6px; }
.modal .learned div { padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .55); border: 1px solid var(--parch-300); font-size: .88rem; }
.modal .learned b { color: var(--green-800); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--parch-300); text-align: left; }
.setting b { display: block; }
.setting span { font-size: .82rem; color: var(--ink-500); }
.setting > svg { flex: none; width: 22px; height: 22px; color: var(--ink-500); }
.setting > div { min-width: 0; }
.switch { width: 60px; height: 34px; border-radius: 20px; background: #cdbf9e; position: relative; flex: none; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); transition: transform .2s; }
.switch.on { background: var(--green-600); }
.switch.on::after { transform: translateX(26px); }
.steps-ios { text-align: left; display: grid; gap: 10px; margin-top: 12px; }
.steps-ios div { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .55); border: 1px solid var(--parch-300); font-size: .92rem; }
.steps-ios i { font-style: normal; width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--green-grad); color: var(--gold-300); font-weight: 700; }
.toast { position: fixed; left: 50%; top: calc(74px + var(--safe-top)); transform: translateX(-50%); z-index: 60; padding: 12px 20px; border-radius: 14px; background: rgba(15, 40, 28, .96); color: var(--parch-50); border: 1px solid var(--gold-600); box-shadow: var(--shadow); font-size: .92rem; max-width: 90vw; text-align: center; animation: rise .25s ease both; pointer-events: none; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; max-height: 78vh; overflow: auto; padding: 18px 16px calc(18px + var(--safe-bottom)); border-radius: 22px 22px 0 0; animation: up .3s ease both; }
@keyframes up { from { transform: translateY(100%); } }
.sheet h3 { font-family: var(--display); color: var(--green-800); margin-bottom: 10px; }
.clue-list button { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--parch-300); font-size: .92rem; }
.clue-list button b { flex: none; min-width: 34px; color: var(--gold-700); }
.clue-list button.ok { color: var(--ink-400); text-decoration: line-through; }
.clue-list h4 { margin: 12px 0 2px; color: var(--green-800); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 49; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- Telas largas (tablet / computador) ---------- */
@media (min-width: 900px) {
  #app.wide .ws-layout { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); align-items: start; }
  #app.wide .ws-side { display: grid; gap: 12px; }
  .hero { min-height: 340px; }
}
@media (max-width: 380px) {
  .phase-dot { width: 52px; height: 52px; }
  .key { height: 50px; font-size: 1.05rem; }
  .hero h1 { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.ws-cell.anchor { background: rgba(233, 207, 140, .95); box-shadow: 0 0 0 2px #c49a3e; transform: scale(1.08); }

.found-pop { position: fixed; left: 12px; right: 12px; bottom: calc(14px + var(--safe-bottom)); z-index: 40; max-width: 560px; margin: 0 auto; padding: 12px 16px; text-align: left; display: grid; gap: 2px; animation: up .3s ease both; }
.found-pop small { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); font-weight: 700; }
.found-pop b { font-family: var(--display); font-size: 1.25rem; color: var(--green-800); letter-spacing: .03em; }
.found-pop span { font-size: .9rem; color: var(--ink-700); }
.found-pop em { font-style: normal; font-size: .8rem; color: var(--gold-700); font-weight: 600; }
@media (min-width: 900px) { #app.wide .ws-stage { max-width: min(100%, calc(100vh - 200px)); margin: 0 auto; } }

@media (max-height: 700px) {
  .cw-clue .mid b { font-size: .85rem; } .cw-clue .nav { width: 40px; height: 40px; } .cw-clue .mid .len { margin-top: 3px; }
  .key { height: 46px; } .kb { gap: 5px; padding-top: 8px; }
}
.screen:has(#kb) { padding-bottom: 8px; }

.drag-ghost { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); }
.drag-ghost .card { position: absolute; transform: rotate(-2deg) scale(1.04); }
.can-drop { box-shadow: 0 0 0 3px rgba(143, 191, 110, .9) !important; border-radius: 12px; }
.slot.can-drop { border-color: #8fbf6e; }
.drop-over { box-shadow: 0 0 0 4px #ffe58f, 0 0 18px rgba(255, 229, 143, .7) !important; border-radius: 12px; }
.so-cols .so-col, .so-slots .slot { transition: box-shadow .15s; }
.badge-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--green-700); color: #fff; font-size: .72rem; display: inline-grid; place-items: center; }
.level .ok { width: auto !important; padding: 0 6px; border-radius: 10px !important; font-size: .62rem !important; color: #ffe58f !important; letter-spacing: -1px; }
.card { touch-action: none; }

.done-card { margin-top: 12px; padding: 16px; display: grid; gap: 12px; animation: rise .4s ease both; border-color: var(--gold-500); }
.done-card .dc-top { display: flex; gap: 12px; align-items: center; }
.done-card .dc-ic { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; background: var(--gold-grad); box-shadow: 0 6px 14px -6px rgba(120, 80, 10, .6); }
.done-card b { display: block; font-family: var(--display); font-size: 1.25rem; color: var(--green-800); }
.done-card span { color: var(--ink-700); font-size: .9rem; }
.done-card .dc-tip { font-size: .82rem; color: var(--ink-500); font-style: italic; }
.done-card .dc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bonus-note { margin-top: 8px !important; font-size: .82rem !important; color: var(--gold-700) !important; font-style: italic; }

.daily-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; margin-bottom: 6px; }
.daily-card .dc-sun { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: var(--gold-grad); }
.daily-card .txt { flex: 1; min-width: 0; }
.daily-card .txt b { display: block; color: var(--green-800); font-size: 1.05rem; }
.daily-card .txt span { font-size: .82rem; color: var(--ink-500); }
.daily-card .dc-ok { font-weight: 700; color: var(--ok); font-size: .9rem; }
.so-tools { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.so-tools .btn { min-width: 0; font-size: .82rem; padding: 0 6px; gap: 6px; }
.so-tools .btn svg { width: 20px; height: 20px; }
.so-tools .badge-n { min-width: 20px; height: 20px; font-size: .68rem; }

.so-tools .btn svg { flex: none; }
.toast.bottom { top: auto; bottom: calc(24px + var(--safe-bottom)); }

/* ---------- Quiz Bíblico ---------- */
.qz-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 14px 8px; margin-top: 12px; }
.qz-stats b { display: block; font-family: var(--display); font-size: 1.25rem; color: var(--green-800); }
.qz-stats span { font-size: .78rem; color: var(--ink-500); }
.qz-stats div + div { border-left: 1px solid var(--parch-edge); }
.qz-ladder-mini { padding: 12px 14px; display: grid; gap: 8px; }
.qz-ladder-mini div { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; font-size: .86rem; color: var(--ink-700); }
.lv { display: inline-block; font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; text-align: center; }
.lv1 { background: #dcebd9; color: #2f6340; } .lv2 { background: #f3e2b8; color: #7a5a17; } .lv3 { background: #f1d3c7; color: #8a3b26; }
.qz-steps { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; margin: 4px 0 10px; }
.qz-steps i { height: 8px; border-radius: 4px; background: rgba(255, 250, 235, .22); }
.qz-steps i.ok { background: var(--gold-grad); }
.qz-steps i.now { background: var(--parch-100); box-shadow: 0 0 0 2px var(--gold-400); }
.qz-values { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; margin-bottom: 12px; text-align: center; color: var(--parch-100); }
.qz-values div { background: rgba(10, 28, 20, .55); border: 1px solid rgba(216, 178, 92, .35); border-radius: 14px; padding: 6px 4px; }
.qz-values .mid { background: var(--gold-grad); color: #3b2a0c; border-color: #a47b2a; }
.qz-values small { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.qz-values b { font-family: var(--display); font-size: 1.05rem; }
.qz-q { padding: 16px 18px 18px; }
.qz-q p { margin: 8px 0 0; font-size: 1.22rem; line-height: 1.38; font-weight: 600; color: var(--ink-900); }
.qz-opts { display: grid; gap: 10px; margin: 12px 0; }
.qz-opt { position: relative; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; text-align: left; min-height: 62px; padding: 10px 14px 10px 10px; border-radius: 16px; background: linear-gradient(180deg, rgba(31, 74, 51, .95), rgba(15, 40, 28, .96)); border: 1.5px solid rgba(216, 178, 92, .5); color: var(--parch-50); box-shadow: var(--shadow-soft); transition: transform .12s, background .2s; overflow: hidden; }
.qz-opt:active:not(:disabled) { transform: scale(.98); }
.qz-opt .l { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; background: var(--gold-grad); color: #3b2a0c; }
.qz-opt .t { font-size: 1.04rem; line-height: 1.3; font-weight: 600; }
.qz-opt .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; grid-column: 1 / -1; background: rgba(255, 255, 255, .08); }
.qz-opt .bar i { display: block; height: 100%; background: var(--gold-400); }
.qz-opt em { font-style: normal; font-weight: 700; font-size: .9rem; color: var(--gold-300); }
.qz-opt.sel { background: var(--gold-grad); color: #3b2a0c; border-color: #8a6a24; }
.qz-opt.sel .l { background: var(--green-800); color: var(--gold-200); }
.qz-opt.sel em { color: #3b2a0c; }
.qz-opt.cut { opacity: .28; }
.qz-opt.cut .t { text-decoration: line-through; }
.qz-opt.right { background: linear-gradient(180deg, #4d9462, #2f6d45); border-color: #bfe3c4; animation: pop .4s ease; }
.qz-opt.right .l { background: #fff; color: #2f6d45; }
.qz-opt.wrong { background: linear-gradient(180deg, #c06a52, #8f3f2b); border-color: #f0c3b5; animation: shake .4s ease; }
.qz-opt.dim { opacity: .45; }
.qz-opt:disabled { cursor: default; }
.qz-tip { text-align: center; color: var(--parch-200); font-style: italic; margin: 6px 0; font-size: .92rem; }
.qz-exp { margin-bottom: 12px; animation: rise .4s ease both; }
.qz-exp.good { border-color: #6fa77b; }
.qz-exp.bad .lbl { color: var(--bad); }
.qz-help { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.qz-help .btn { position: relative; flex-direction: column; gap: 2px; min-height: 64px; padding: 6px 4px; font-size: .74rem; min-width: 0; background: rgba(255, 250, 235, .9); }
.qz-help .btn svg { width: 22px; height: 22px; }
.qz-help .btn:disabled { opacity: .4; }
.qz-help .badge-n { position: absolute; top: 4px; right: 6px; font-style: normal; }
.qz-end { text-align: center; padding: 24px 18px; margin-top: 6px; }
.qz-end .badge { font-size: 3rem; }
.qz-end h2 { font-family: var(--display); font-size: 1.5rem; margin: 6px 0; }
.qz-end .prize { font-family: var(--display); font-size: 2.3rem; color: var(--gold-300); line-height: 1.1; margin: 8px 0; }
.qz-end .prize small { display: block; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--parch-200); }
.qz-end p { color: var(--parch-100); }
.qz-end .pill { background: rgba(255, 250, 235, .12); color: var(--parch-100); border: 1px solid rgba(216, 178, 92, .45); }
.qz-end .pill.rec { background: var(--gold-grad); color: #3b2a0c; }
.qz-end .pill { margin-top: 6px; } .qz-end p { margin: 4px 0 10px; }
.qz-ladder-mini b { font-weight: 500; white-space: nowrap; }

/* ---------- v1.2: tela inicial ---------- */
.today-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.today { position: relative; display: grid; justify-items: start; gap: 2px; padding: 12px 12px 12px; text-align: left; min-height: 112px; }
.today .ti { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-grad); color: #3b2a0c; margin-bottom: 4px; }
.today .ti svg { width: 24px; height: 24px; }
.today b { color: var(--green-800); font-size: 1rem; line-height: 1.2; }
.today small { color: var(--ink-500); font-size: .8rem; }
.today.ok { border-color: #8cbf96; }
.today.ok small { color: var(--ok); font-weight: 700; }
.nw { position: absolute; top: 8px; right: 8px; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .1em; padding: 2px 7px; border-radius: 999px; background: #b4553f; color: #fff; }
.nw:empty { display: none; }
.gtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gtile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; min-height: 178px; padding: 12px; border-radius: var(--radius); background: center / cover; border: 1px solid rgba(216, 178, 92, .55); color: var(--parch-50); box-shadow: var(--shadow); transition: transform .12s; }
.gtile:active { transform: scale(.97); }
.gtile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 26, 18, .25), rgba(10, 26, 18, .55) 40%, rgba(8, 22, 15, .93)); }
.gtile > * { position: relative; }
.gtile .gi { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--gold-grad); color: #3b2a0c; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); margin-bottom: auto; }
.gtile .gi svg { width: 26px; height: 26px; }
.gtile b { font-family: var(--display); font-size: 1.02rem; line-height: 1.15; color: var(--gold-200); margin-top: 10px; }
.gtile small { font-size: .76rem; line-height: 1.3; color: rgba(248, 240, 220, .88); }
.gtile .pg { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; font-size: .74rem; font-weight: 700; color: var(--gold-300); }
.gtile .pg i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.gtile .pg u { display: block; height: 100%; background: var(--gold-grad); }

/* ---------- Palavra do Dia ---------- */
.pd-board { display: grid; gap: 7px; width: min(330px, 100%); margin: 6px auto 12px; }
.pd-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.pd-t { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.7rem; color: var(--ink-900); background: rgba(255, 250, 235, .14); border: 2px solid rgba(216, 178, 92, .35); }
.pd-t.typed { background: var(--parch-100); border-color: var(--gold-500); animation: pop .15s ease; }
.pd-t.caret { border-color: var(--gold-300); box-shadow: 0 0 0 2px rgba(233, 207, 140, .35); }
.pd-t.on { color: #fff; border-color: transparent; }
.pd-t.ok { background: linear-gradient(180deg, #4f9a66, #2f6d45); }
.pd-t.near { background: linear-gradient(180deg, #d9b04f, #a8842f); }
.pd-t.no { background: #5d5a52; }
.pd-t.flip { animation: flip .38s ease; }
@keyframes flip { 50% { transform: rotateX(90deg); } }
.pd-row.shake, .shake { animation: shake .35s ease; }
.pd-row.bounce .pd-t { animation: bounce .5s ease; }
.pd-row.bounce .pd-t:nth-child(2) { animation-delay: .08s; } .pd-row.bounce .pd-t:nth-child(3) { animation-delay: .16s; } .pd-row.bounce .pd-t:nth-child(4) { animation-delay: .24s; } .pd-row.bounce .pd-t:nth-child(5) { animation-delay: .32s; }
@keyframes bounce { 40% { transform: translateY(-12px); } }
.key.k2 { background: linear-gradient(180deg, #5aa872, #2f6d45); color: #fff; box-shadow: 0 3px 0 #1f4a2f; }
.key.k1 { background: linear-gradient(180deg, #e7c46a, #b8913a); color: #3b2a0c; box-shadow: 0 3px 0 #7d5f1f; }
.key.k0 { background: #77736a; color: #e9e4d6; box-shadow: 0 3px 0 #4a473f; }
.pd-enter { font-family: var(--display); font-size: 1rem; }
.pd-res h3 { font-size: 1.8rem; letter-spacing: .06em; }
.pd-stats { padding: 14px; margin: 12px 0; }
.pd-stats .nums { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.pd-stats .nums b { display: block; font-family: var(--display); font-size: 1.4rem; color: var(--green-800); }
.pd-stats .nums span { font-size: .72rem; color: var(--ink-500); }
.pd-stats .dist { display: grid; gap: 5px; margin-top: 12px; }
.pd-stats .dist div { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--ink-700); }
.pd-stats .dist i { width: 12px; font-style: normal; }
.pd-stats .dist span { display: block; text-align: right; padding: 1px 8px; border-radius: 6px; background: #8c8676; color: #fff; }
.pd-stats .dist span.me { background: var(--ok); }
.pd-next { text-align: center; color: var(--ink-500); font-size: .85rem; margin: 10px 0 0; }

/* ---------- Ligações ---------- */
.lg-info { display: flex; justify-content: space-between; align-items: center; color: var(--parch-100); font-size: .92rem; margin: 2px 2px 10px; }
.lg-mist { color: #f1c9bb; font-weight: 700; }
.lg-found { display: grid; gap: 8px; margin-bottom: 8px; }
.lg-group { display: grid; gap: 2px; text-align: center; padding: 10px 12px; border-radius: 14px; animation: pop .4s ease; color: #23180a; }
.lg-group b { font-family: var(--display); font-size: .98rem; }
.lg-group span { font-size: .84rem; font-weight: 600; }
.lg-group.c0 { background: linear-gradient(180deg, #cfe6c9, #a9cf9f); } .lg-group.c1 { background: linear-gradient(180deg, #f6e2a6, #e2bd66); } .lg-group.c2 { background: linear-gradient(180deg, #cfe0ef, #a2c1dc); } .lg-group.c3 { background: linear-gradient(180deg, #ecd0e6, #cfa5c7); }
.lg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.lg-t { min-height: 66px; padding: 4px 3px; border-radius: 12px; background: var(--parch-100); border: 1.5px solid var(--parch-edge); color: var(--ink-900); font-weight: 700; font-size: .9rem; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; box-shadow: 0 3px 0 #c9b383; transition: transform .1s; }
.lg-t.sm { font-size: .78rem; } .lg-t.xs { font-size: .68rem; letter-spacing: -.01em; }
.lg-t.sel { background: var(--green-grad); color: var(--gold-200); border-color: var(--gold-500); box-shadow: 0 3px 0 #0a1c14; transform: translateY(1px); }
.lg-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 8px; }
.lg-tools .btn { min-height: 46px; font-size: .84rem; padding: 0 6px; gap: 6px; min-width: 0; }
.lg-tools .btn svg { width: 20px; height: 20px; }
.btn:disabled { opacity: .45; }
.lg-hint { margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 250, 235, .92); color: var(--ink-700); font-size: .92rem; }
#disc .discovery { margin-top: 12px; }

/* ---------- Complete o Versículo ---------- */
.vs-card { padding: 18px 18px 20px; margin-top: 4px; }
.vs-card.complete { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(216, 178, 92, .35), var(--shadow); }
.vs-ref { display: flex; gap: 8px; align-items: center; color: var(--gold-700); font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.vs-ref svg { width: 20px; height: 20px; }
.vs-text { font-size: 1.28rem; line-height: 1.75; color: var(--ink-900); font-style: italic; }
.vs-slot { display: inline-block; min-width: 72px; padding: 0 8px; margin: 0 2px; border-radius: 9px; border-bottom: 3px solid var(--gold-600); background: rgba(216, 178, 92, .18); font-style: normal; font-weight: 700; line-height: 1.5; color: var(--green-800); }
.vs-slot.act { background: rgba(216, 178, 92, .45); box-shadow: 0 0 0 2px var(--gold-500); }
.vs-slot.ok { background: #d7ecd4; border-color: var(--ok); }
.vs-gap { color: var(--gold-600); font-weight: 700; }
.vs-tip { text-align: center; color: var(--parch-200); font-style: italic; margin: 12px 0 8px; font-size: .92rem; }
.vs-bank { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.vs-w { min-height: 52px; padding: 6px 16px; border-radius: 14px; background: var(--parch-100); border: 1.5px solid var(--parch-edge); color: var(--ink-900); font-weight: 700; font-size: 1.05rem; box-shadow: 0 3px 0 #c9b383; }
.vs-w.chunk { width: 100%; font-weight: 600; font-size: 1rem; text-align: left; padding: 10px 16px; }
.vs-w:disabled { opacity: .25; box-shadow: none; }

/* ---------- Roda de Letras ---------- */
.rd-board { display: grid; gap: 4px; justify-content: center; margin: 4px auto 8px; }
.rd-c { border-radius: 8px; background: rgba(255, 250, 235, .2); border: 1.5px solid rgba(233, 207, 140, .5); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: calc(var(--cs) * .55); color: var(--green-900); }
.rd-c.on { background: var(--parch-100); border-color: var(--gold-500); }
.rd-c.new { animation: pop .5s ease; background: #f6e2a6; }
.rd-play { position: sticky; bottom: 0; margin: 10px -16px calc(-28px - var(--safe-bottom)); padding: 8px 16px calc(12px + var(--safe-bottom)); border-radius: 22px 22px 0 0; background: linear-gradient(180deg, rgba(20, 52, 36, .9), rgba(10, 28, 20, .97)); border-top: 1px solid rgba(216, 178, 92, .4); }
.rd-word { text-align: center; min-height: 40px; font-family: var(--display); font-size: 1.6rem; letter-spacing: .14em; color: var(--gold-200); }
.rd-wheel { position: relative; width: min(250px, 66vw); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, rgba(255, 250, 235, .16), rgba(255, 250, 235, .06)); border: 2px solid rgba(216, 178, 92, .45); touch-action: none; user-select: none; -webkit-user-select: none; }
.rd-wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rd-wheel polyline { fill: none; stroke: var(--gold-400); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.rd-l { position: absolute; width: 23%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--parch-100); color: var(--ink-900); font-family: var(--display); font-weight: 700; font-size: 1.55rem; box-shadow: 0 4px 0 #b39a68, 0 6px 12px rgba(0, 0, 0, .35); touch-action: none; }
.rd-l.sel { background: var(--gold-grad); color: #3b2a0c; }
.rd-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 12px; }
.rd-tools .btn { flex-direction: column; gap: 1px; min-height: 58px; padding: 4px; font-size: .74rem; min-width: 0; }
.rd-tools .btn-ghost { background: rgba(255, 250, 235, .92); }
.rd-tools .btn svg { width: 22px; height: 22px; }
.rd-tools em { font-style: normal; font-weight: 800; }
.rd-tools [data-go] { font-size: .8rem; } 
.screen:has(.rd-play) { padding-bottom: 8px; }

/* ---------- Quem Sou Eu ---------- */
.qs-head { display: flex; align-items: center; gap: 12px; color: var(--parch-100); margin: 4px 0 10px; }
.qs-q { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 1.8rem; font-weight: 700; background: var(--gold-grad); color: #3b2a0c; }
.qs-head b { display: block; font-family: var(--display); font-size: 1.3rem; color: var(--gold-200); }
.qs-head small { color: var(--parch-200); }
.qs-clues { display: grid; gap: 8px; }
.qs-clue { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.qs-clue span { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--green-800); color: var(--gold-200); }
.qs-clue p { margin: 0; font-size: 1.08rem; line-height: 1.4; font-weight: 600; color: var(--ink-900); }
.qs-clue.pop { animation: rise .4s ease both; }
.qs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.qs-row .btn { min-height: 48px; font-size: .86rem; padding: 0 8px; gap: 6px; min-width: 0; }
.qs-row .btn svg { width: 20px; height: 20px; }
.qs-alts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qs-alts:empty { display: none; }
.qs-alt { min-height: 52px; border-radius: 14px; background: var(--green-grad); color: var(--parch-50); border: 1.5px solid rgba(216, 178, 92, .5); font-weight: 700; font-size: 1.02rem; }
.qs-alt.cut { opacity: .3; text-decoration: line-through; }
.qs-ans { display: flex; justify-content: center; gap: 5px; margin: 14px 0 10px; flex-wrap: wrap; }
.qs-ans i { width: min(34px, 8.6vw); height: 44px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-family: var(--display); font-weight: 700; font-size: 1.4rem; background: var(--parch-100); color: var(--ink-900); border: 2px solid var(--parch-edge); }
.qs-ans i.caret { border-color: var(--gold-500); box-shadow: 0 0 0 2px rgba(216, 178, 92, .5); }
.qs-ans.ok i { background: linear-gradient(180deg, #5aa872, #2f6d45); color: #fff; border-color: #bfe3c4; }
.qs-ans.shake { animation: shake .35s ease; }

/* ---------- Memória ---------- */
.mm-grid { display: grid; gap: 8px; }
.mm-c { aspect-ratio: .78; perspective: 700px; }
.mm-c .in { position: relative; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.mm-c.up .in, .mm-c.ok .in { transform: rotateY(180deg); }
.mm-c .back, .mm-c .face { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; }
.mm-c .back { background: var(--green-grad); border: 2px solid var(--gold-500); color: var(--gold-300); font-size: 1.6rem; box-shadow: var(--shadow-soft); background-image: repeating-linear-gradient(45deg, rgba(216, 178, 92, .12) 0 6px, transparent 6px 12px), var(--green-grad); }
.mm-c .face { transform: rotateY(180deg); background: var(--parch-100); border: 2px solid var(--parch-edge); align-content: center; gap: 2px; padding: 4px; }
.mm-c .face.theme { background: var(--gold-grad); border-color: #a47b2a; }
.mm-c .face .e { font-size: 1.9rem; line-height: 1; }
.mm-c .face .n { font-size: .68rem; font-weight: 700; line-height: 1.15; color: var(--ink-900); text-align: center; }
.mm-c .face i { position: absolute; top: 2px; right: 4px; font-style: normal; font-size: .7rem; }
.mm-c.ok .face { border-color: var(--ok); box-shadow: 0 0 0 2px rgba(63, 122, 79, .6); }

/* ---------- Linha do Tempo ---------- */
.tm-label { text-align: center; color: var(--gold-300); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin: 10px 0; }
.tm-label.top { margin-top: 2px; }
.tm-list { display: grid; gap: 8px; }
.tm-c { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 10px; border-radius: 14px; background: var(--parch-100); border: 1.5px solid var(--parch-edge); box-shadow: var(--shadow-soft); touch-action: none; user-select: none; -webkit-user-select: none; transition: background .2s; }
.tm-c.drag { position: relative; z-index: 5; box-shadow: 0 14px 30px rgba(0, 0, 0, .4); background: #fff8e4; transition: none; }
.tm-c.ok { background: #d9eed5; border-color: var(--ok); }
.tm-c .h { color: var(--ink-400); font-weight: 800; width: 16px; text-align: center; }
.tm-c.ok .h { color: var(--ok); }
.tm-c .e { font-size: 1.6rem; }
.tm-c .t { flex: 1; min-width: 0; }
.tm-c .t b { display: block; font-size: 1rem; line-height: 1.25; color: var(--ink-900); }
.tm-c .t small { display: block; font-size: .82rem; color: var(--ink-500); margin-top: 2px; }
.tm-c .ar { display: grid; gap: 4px; }
.tm-c .ar button { width: 38px; height: 30px; border-radius: 9px; background: var(--green-grad); color: var(--gold-200); font-size: .8rem; }
.tm-c .ar button:disabled { opacity: .25; }
.gtile > .nw { position: absolute; top: 10px; right: 10px; }
.screen:has(#kb), .screen:has(.rd-play) { min-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 36px); min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 36px); display: flex; flex-direction: column; } .screen > #kb, .screen > .rd-play { margin-top: auto; }
.topbar .ttl b, .topbar .ttl small, .lg-info, .vs-tip, .tm-label { text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.rd-play { position: static; margin-top: 10px; }
.rd-disc { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; margin: 4px 0 0; }
.rd-disc b { font-family: var(--display); color: var(--green-800); font-size: 1.1rem; white-space: nowrap; }
.rd-disc span { font-size: .86rem; color: var(--ink-700); line-height: 1.35; }
.rd-disc i { color: var(--gold-700); font-style: normal; font-weight: 700; white-space: nowrap; }
.tm-c .h { font-size: 1.2rem; }
/* Palavra do Dia v1.3: cores claras, sinais e pistas */
.pd-t.near { background: linear-gradient(180deg, #e8964f, #b9632a); }
.pd-t.no { background: #5d5a52; color: #d9d4c7; }
.pd-t.on { position: relative; }
.pd-t.on::after { content: attr(data-m); position: absolute; top: 3px; right: 6px; font-family: var(--serif); font-size: .7rem; font-weight: 800; opacity: .9; }
.pd-ex .pd-t.ok::after { content: '✓'; } .pd-ex .pd-t.near::after { content: '↔'; } .pd-ex .pd-t.no::after { content: '✕'; }
.key.k1 { background: linear-gradient(180deg, #ee9f5a, #bd6a2f); color: #fff; box-shadow: 0 3px 0 #7f4119; }
.pd-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center; margin: 0 0 8px; color: var(--parch-100); font-size: .82rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pd-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pd-mini { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-style: normal; font-size: .72rem; font-weight: 800; color: #fff; text-shadow: none; flex: none; }
.pd-mini.ok { background: #3f8a57; } .pd-mini.near { background: #d07a38; } .pd-mini.no { background: #5d5a52; }
.pd-help { width: 30px; height: 30px; border-radius: 50%; background: var(--gold-grad); color: #3b2a0c; font-weight: 800; font-family: var(--display); }
.pd-clues { padding: 10px 14px; margin: 0 0 12px; display: grid; gap: 4px; font-size: .9rem; color: var(--ink-700); }
.pd-clues .pc-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pd-clues b { color: var(--green-800); }
.pc-known { display: inline-flex; gap: 4px; }
.pc-known i { width: 24px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-family: var(--display); font-weight: 700; background: rgba(63,138,87,.15); color: var(--green-900); }
.pd-row.glow .pd-t { box-shadow: 0 0 0 3px rgba(233, 207, 140, .7); }
.pd-ex { width: min(260px, 100%); margin: 10px auto; }
.pd-ex .pd-t { font-size: 1.3rem; }
.pd-explain { display: grid; gap: 8px; text-align: left; margin-top: 8px; }
.pd-explain div { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--ink-700); }
.win-slot { margin-top: 14px; scroll-margin-top: 12px; }
.win-card { padding: 18px 16px 16px; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(216, 178, 92, .35), var(--shadow); animation: rise .45s ease both; }
.win-card .wc-top { display: flex; gap: 14px; align-items: center; }
.win-card .wc-badge { width: 62px; height: 62px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.9rem; background: var(--gold-grad); box-shadow: 0 8px 18px -8px rgba(120, 80, 10, .7); }
.win-card h2 { font-family: var(--display); color: var(--green-800); font-size: 1.35rem; line-height: 1.2; }
.win-card .wc-stars { font-size: 1.6rem; letter-spacing: 3px; color: var(--gold-500); }
.win-card .wc-stars .off { color: rgba(160, 130, 70, .3); }
.win-card .wc-text { margin: 10px 0 0; color: var(--ink-700); }
.win-card .wc-learned { display: grid; gap: 6px; margin-top: 10px; }
.win-card .wc-learned div { padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .55); border: 1px solid var(--parch-300); font-size: .88rem; }
.win-card .wc-learned b { color: var(--green-800); }
.win-card .wc-actions { display: grid; gap: 8px; margin-top: 14px; }
.trk-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.trk { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border-radius: 16px; background: rgba(255, 250, 235, .14); border: 1.5px solid rgba(216, 178, 92, .45); color: var(--parch-100); }
.trk span { font-size: 1.3rem; } .trk b { font-family: var(--display); font-size: .82rem; } .trk small { font-size: .72rem; opacity: .85; }
.trk.on { background: var(--gold-grad); color: #3b2a0c; border-color: #a47b2a; box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); }
.trk-desc { text-align: center; color: var(--parch-200); font-size: .88rem; margin: 8px 4px 0; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.lnk { color: var(--gold-300); text-decoration: underline; font-size: inherit; padding: 0; }
.kb .pd-clues { margin: 0 2px 4px; padding: 8px 12px; font-size: .82rem; gap: 2px; border-radius: 14px; }
.kb .pc-known i { width: 22px; height: 24px; }
.pd-ex .pd-t.on::after { font-size: .55rem; top: 2px; right: 4px; }
.pd-board { width: min(300px, 100%); gap: 6px; }
.pd-row { gap: 6px; }

/* ---------- Cantinho Kids ---------- */
.kids-banner { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 4px; padding: 10px 14px 10px 8px; border-radius: 22px; text-align: left; background: linear-gradient(135deg, #fff6df, #ffe7c2 55%, #f9d9b4); border: 2px solid #f0c98a; box-shadow: var(--shadow); }
.kids-banner img { width: 86px; height: 86px; object-fit: contain; flex: none; margin: -14px 0 -6px; filter: drop-shadow(0 6px 8px rgba(120, 70, 10, .25)); }
.kids-banner b { display: block; font-family: var(--display); font-size: 1.2rem; color: #8a4f16; }
.kids-banner span { font-size: .84rem; color: #7a5a3a; }
body.kids::before { background: linear-gradient(180deg, rgba(255, 248, 230, .25), rgba(255, 236, 205, .55) 50%, rgba(250, 226, 190, .85)); }
body.kids { background-color: #f6e6c8; }
.kd-top .ttl b { color: #fff8e6; } .kd-top .ttl small { color: #fff3d6; }
.kd-top .icon-btn { font-size: 1.3rem; }
.kd-nine { display: flex; align-items: flex-end; gap: 6px; margin: 4px 0 12px; }
@keyframes kdbob { 50% { transform: translateY(-4px); } }
.kd-bubble { position: relative; flex: 1; background: #fffdf6; border: 2px solid #f0c98a; border-radius: 22px 22px 22px 6px; padding: 12px 14px; font-size: 1.08rem; line-height: 1.4; color: #5a3a1a; box-shadow: 0 8px 18px -10px rgba(120, 70, 10, .4); animation: rise .35s ease both; }
.kd-bubble b { color: #b05a12; }
.kd-band { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.kd-band button { display: grid; justify-items: center; padding: 10px 6px; border-radius: 20px; background: rgba(255, 253, 246, .8); border: 2px solid #f0d6a8; color: #6a4a2a; }
.kd-band button span { font-size: 1.8rem; } .kd-band button b { font-family: var(--display); font-size: 1.05rem; } .kd-band button small { font-size: .78rem; }
.kd-band button.on { background: linear-gradient(180deg, #ffd98a, #f5b951); border-color: #d8902a; color: #5a2f05; box-shadow: 0 8px 16px -8px rgba(160, 90, 10, .6); }
body.kids .section-title h2 { color: #8a4f16; text-shadow: none; } body.kids .section-title span { color: #8a6a4a; }
.kd-stories { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kd-story { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 2px; padding: 14px 8px 12px; border-radius: 22px; background: center / cover; border: 2px solid #f0c98a; color: #fff; text-align: center; box-shadow: var(--shadow-soft); min-height: 140px; align-content: end; }
.kd-story::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 240, 210, .1), rgba(90, 50, 15, .65)); }
.kd-story > * { position: relative; }
.kd-story .ic { font-size: 2.6rem; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.kd-story b { font-family: var(--display); font-size: .98rem; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.kd-story em { font-style: normal; font-size: .74rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.85); color: #8a4f16; }
.kd-story em.new { background: #ffcf6e; color: #5a2f05; }
.kd-story.soon { background: #f3e2c3; border-style: dashed; color: #8a6a4a; }
.kd-story.soon::before { display: none; }
.kd-story.soon b { text-shadow: none; color: #8a6a4a; } .kd-story.soon .ic { opacity: .5; filter: grayscale(.6); }
.kd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.kd-row.three { grid-template-columns: 1fr .8fr 1fr; }
.kd-row .btn { min-height: 56px; border-radius: 20px; padding: 0 8px; }
.kd-note { text-align: center; color: #8a6a4a; font-size: .82rem; margin-top: 12px; }
.kd-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 10px; }
.kd-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.6); border: 2px solid #f0c98a; }
.kd-dots i.on { background: #f5b951; } .kd-dots i.now { background: #fff; box-shadow: 0 0 0 3px #f5b951; }
.kd-text { margin: 14px 2px 10px; padding: 14px 16px; border-radius: 22px; background: #fffdf6; border: 2px solid #f0d6a8; font-size: 1.22rem; line-height: 1.5; color: #4a2f15; }
.kd-text.small { font-size: 1.3rem; }
.kd-nav { display: grid; grid-template-columns: .6fr 1fr 1.4fr; gap: 8px; }
.kd-nav.one { grid-template-columns: 1fr; margin-top: 10px; }
.kd-nav .btn { min-height: 58px; border-radius: 20px; padding: 0 8px; font-size: 1rem; }
body.kids .btn-ghost { background: rgba(255, 253, 246, .9); color: #6a4a2a; border-color: #f0d6a8; }
.kd-opts.pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kd-pic { display: grid; justify-items: center; gap: 4px; padding: 14px 4px; border-radius: 24px; background: #fffdf6; border: 3px solid #f0d6a8; box-shadow: 0 6px 0 #ead2a6; color: #5a3a1a; transition: transform .15s, opacity .3s; }
.kd-pic span { font-size: 3.2rem; line-height: 1; }
.kd-pic b { font-size: .92rem; }
.kd-pic:active { transform: translateY(3px); }
.kd-pic.ok, .kd-word.ok { background: #e3f4dc; border-color: #6fb07c; box-shadow: 0 6px 0 #a9d5b0; animation: pop .5s ease; }
.kd-pic.no { opacity: .25; transform: scale(.9); }
.kd-opts.words { display: grid; gap: 10px; }
.kd-word { min-height: 60px; padding: 10px 16px; border-radius: 20px; background: #fffdf6; border: 3px solid #f0d6a8; box-shadow: 0 5px 0 #ead2a6; color: #4a2f15; font-weight: 700; font-size: 1.08rem; text-align: left; }
.kd-word.no { opacity: .35; text-decoration: line-through; }
#kdAfter .btn { margin-top: 14px; min-height: 60px; border-radius: 20px; }
.kd-win { text-align: center; display: grid; justify-items: center; gap: 6px; margin-top: 6px; }
.kd-win h2 { font-family: var(--display); color: #8a4f16; font-size: 1.4rem; }
.kd-win p { color: #6a4a2a; }
.kd-sticker { display: grid; justify-items: center; width: 190px; padding: 16px 10px; border-radius: 26px; background: linear-gradient(160deg, #fff7e0, #ffe2a8); border: 3px dashed #d8902a; transform: rotate(-4deg); animation: kdstk .8s cubic-bezier(.2, 1.4, .4, 1) both; box-shadow: 0 14px 24px -12px rgba(140, 80, 10, .6); }
.kd-sticker span { font-size: 4rem; } .kd-sticker b { font-family: var(--display); color: #8a4f16; } .kd-sticker small { color: #8a6a4a; }
@keyframes kdstk { from { transform: scale(.2) rotate(-30deg); opacity: 0; } }
.kd-album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kd-stk { display: grid; justify-items: center; align-content: center; gap: 2px; aspect-ratio: .82; padding: 6px; border-radius: 20px; background: rgba(255, 253, 246, .6); border: 2px dashed #e5c999; color: #a08a6a; text-align: center; }
.kd-stk span { font-size: 2rem; } .kd-stk b { font-size: .74rem; line-height: 1.15; } .kd-stk small { font-size: .64rem; }
.kd-stk.got { background: linear-gradient(160deg, #fff7e0, #ffe2a8); border: 2px solid #d8902a; color: #6a3a0a; transform: rotate(-2deg); }
.kd-stk.got span { font-size: 2.6rem; }
.kd-turma-intro { padding: 14px 16px; } .kd-turma-intro h3 { color: #8a4f16; } .kd-turma-intro ol { margin: 6px 0 0; padding-left: 20px; color: #5a3a1a; }
.kd-score { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.kd-score div { display: grid; justify-items: center; padding: 8px; border-radius: 20px; background: #fffdf6; border: 2px solid #f0c98a; }
.kd-score span { font-size: 2rem; } .kd-score b { font-family: var(--display); font-size: 2rem; color: #8a4f16; line-height: 1; } .kd-score small { color: #8a6a4a; font-weight: 700; }
.kd-score.big { width: 100%; }
.kd-tq { padding: 18px; font-size: 1.5rem; font-weight: 700; color: #4a2f15; text-align: center; line-height: 1.35; }
.kd-topts { display: grid; gap: 10px; margin: 12px 0; }
.kd-topts div { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 20px; background: #fffdf6; border: 2px solid #f0d6a8; font-size: 1.2rem; font-weight: 700; color: #4a2f15; }
.kd-topts i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: #f5b951; color: #5a2f05; flex: none; }
.kd-topts .ok { background: #e3f4dc; border-color: #6fb07c; } .kd-topts .dim { opacity: .4; }
.kd-te { text-align: center; color: #6a4a2a; margin: 0 0 4px; }
body.turma .kd-tq { font-size: clamp(1.5rem, 4vw, 2.6rem); }
body.turma .kd-topts div { font-size: clamp(1.15rem, 3vw, 2rem); }

/* ===================== v1.4 — Nine animada ===================== */
.nine { position: relative; display: block; flex: none; width: 112px; aspect-ratio: 1; padding: 0; background: none; border: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.nine .lu-b { position: absolute; inset: 0; display: block; transform-origin: 50% 96%; animation: lubreath 3.4s ease-in-out infinite; }
.nine .lu-i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 8px 10px rgba(120, 70, 10, .22)); user-select: none; -webkit-user-select: none; pointer-events: none; }
/* o quadro de piscar fica alinhado à imagem: a pose ocupa a caixa inteira pela largura */
.nine .lu-e { position: absolute; height: auto; opacity: 0; pointer-events: none; }
.nine[data-pose="oi"] .lu-i, .nine[data-pose="pensando"] .lu-i, .nine[data-pose="dica"] .lu-i, .nine[data-pose="lendo"] .lu-i { object-fit: fill; }
.nine[data-pose="oi"] .lu-b { inset: 0 6.4%; } .nine[data-pose="pensando"] .lu-b { inset: 0 8.5%; } .nine[data-pose="lendo"] .lu-b { inset: 10.3% 0 0; } .nine[data-pose="dica"] .lu-b { inset: 1.1% 0 0; }
.nine.blink .lu-e { opacity: 1; }
.nine .lu-sh { position: absolute; left: 22%; right: 22%; bottom: -2px; height: 9px; border-radius: 50%; background: rgba(120, 70, 10, .18); filter: blur(2px); animation: lushadow 3.4s ease-in-out infinite; }
.nine .lu-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.nine .lu-fx i { position: absolute; top: 18%; font-style: normal; animation: lupart 1.3s ease-out both; }
@keyframes lubreath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975) translateY(1px); } }
@keyframes lushadow { 50% { transform: scaleX(1.06); } }
@keyframes lupart { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.1); } }
/* falando: balança junto com a voz */
.nine.talk .lu-b { animation: lutalk .46s ease-in-out infinite; }
@keyframes lutalk { 0%, 100% { transform: translateY(0) rotate(0) scale(1, 1); } 30% { transform: translateY(-3px) rotate(-1.5deg) scale(.99, 1.02); } 70% { transform: translateY(-1px) rotate(1.5deg) scale(1.01, .99); } }
/* pulo de alegria */
.nine.hop .lu-b, .nine.party .lu-b { animation: luhop .8s cubic-bezier(.3, .6, .3, 1); }
.nine.party .lu-b { animation: luhop 1s cubic-bezier(.3, .6, .3, 1) infinite; }
.nine.hop .lu-sh, .nine.party .lu-sh { animation: lushhop .8s ease; }
.nine.party .lu-sh { animation: lushhop 1s ease infinite; }
@keyframes luhop { 0% { transform: scale(1, 1); } 15% { transform: scale(1.12, .86); } 40% { transform: translateY(-26%) scale(.94, 1.08) rotate(-4deg); } 62% { transform: translateY(0) scale(1.1, .9); } 80% { transform: scale(.97, 1.03); } 100% { transform: scale(1, 1); } }
@keyframes lushhop { 40% { transform: scaleX(.6); opacity: .5; } }
/* "não foi essa": balança a cabeça */
.nine.no .lu-b { animation: luno .7s ease; }
@keyframes luno { 20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }
/* tchauzinho e dica */
.nine.wave .lu-b { animation: luwave .55s ease-in-out 3; }
@keyframes luwave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg) translateY(-2px); } }
.nine.lean .lu-b { animation: lulean 1s ease; }
@keyframes lulean { 30%, 70% { transform: translateX(6%) rotate(5deg); } }
/* troca de pose e entrada */
.nine.swap .lu-b { animation: luswap .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes luswap { 0% { transform: scale(.82, 1.12); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.nine.enter { animation: luenter .75s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes luenter { 0% { transform: translateY(40%) scale(.5); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* dormindo */
.nine.sleep .lu-b { animation: lusleep 4s ease-in-out infinite; }
@keyframes lusleep { 50% { transform: scale(1.03, .96); } }
.nine.sleep .lu-fx i { color: #8a6a9a; font-weight: 800; font-family: var(--display); animation: luzzz 2.4s ease-out both; top: 10%; left: 70% !important; }
@keyframes luzzz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(26px, -60px) scale(1.4) rotate(15deg); } }
.kd-nine { display: flex; align-items: flex-end; gap: 6px; margin: 4px 0 12px; }
.kd-nine.solo { justify-content: center; margin: 0; }
.kd-nine.solo .nine { width: 150px; }
.kd-nine.solo.mid .nine { width: 84px; }
.kd-bubble.pop { animation: kdpop .35s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes kdpop { 0% { transform: scale(.92); } 100% { transform: none; } }
.kd-bubble small { display: block; color: #8a6a4a; font-size: .86rem; }
.kd-score:has(.kd-nine) { grid-template-columns: 1fr auto 1fr; align-items: center; }
/* Nine pequenina lendo no canto da cena */
.nine.mini { position: absolute; right: 2px; bottom: 0; width: 86px; z-index: 3; }

/* ===================== v1.4 — cenas vivas ===================== */
.kd-scene { position: relative; height: 240px; border-radius: 28px; overflow: hidden; display: grid; place-items: center; background: var(--bgimg) center / cover; border: 3px solid #f0c98a; animation: kdin .45s ease both; }
.kd-scene.back { animation-name: kdinb; }
@keyframes kdin { from { transform: translateX(14px) scale(.97); opacity: 0; } }
@keyframes kdinb { from { transform: translateX(-14px) scale(.97); opacity: 0; } }
.kd-art { position: relative; z-index: 2; display: flex; gap: 2px; align-items: flex-end; justify-content: center; flex-wrap: wrap; max-width: 86%; padding-bottom: 10px; }
.kd-art span { display: inline-block; font-size: 3.6rem; line-height: 1.1; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); animation: kdart .6s cubic-bezier(.3, 1.6, .5, 1) var(--d) both, kdfloat var(--f) ease-in-out calc(var(--d) + .6s) infinite; }
.kd-art.n1 span { font-size: 6rem; } .kd-art.n2 span { font-size: 4.6rem; } .kd-art.n3 span { font-size: 4rem; }
@keyframes kdart { 0% { transform: translateY(30px) scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes kdfloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(2deg); } }
.kfx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.kfx.chuva { z-index: 3; background: linear-gradient(180deg, rgba(40, 60, 90, .35), rgba(40, 60, 90, .1)); }
.kfx.chuva i { position: absolute; top: -20%; width: 2px; height: 18px; border-radius: 2px; background: linear-gradient(transparent, rgba(220, 240, 255, .95)); animation: kdrain .7s linear infinite; }
@keyframes kdrain { to { transform: translate(-30px, 330px); } }
.fx-chuva .kd-art span, .kd-scene:has(.chuva) .kd-art span { animation: kdart .6s cubic-bezier(.3, 1.6, .5, 1) var(--d) both, kdrock 1.8s ease-in-out calc(var(--d) + .6s) infinite; }
.kd-scene:has(.ondas) .kd-art span { animation: kdart .6s cubic-bezier(.3, 1.6, .5, 1) var(--d) both, kdrock 2.6s ease-in-out calc(var(--d) + .6s) infinite; }
@keyframes kdrock { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-6px); } }
.kfx.estrelas i { position: absolute; color: #fff7c8; font-style: normal; text-shadow: 0 0 8px #fff3a0; animation: kdtw 2s ease-in-out infinite; }
@keyframes kdtw { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
.kfx.brilho i { position: absolute; bottom: -10%; font-style: normal; font-size: 18px; animation: kdrise 3.2s ease-in infinite; }
@keyframes kdrise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-260px) scale(1.1) rotate(20deg); opacity: 0; } }
.kfx.vento i { position: absolute; left: -12%; font-style: normal; font-size: 20px; animation: kdwind 3s linear infinite; }
@keyframes kdwind { 0% { transform: translateX(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateX(440px) translateY(-30px) rotate(320deg); opacity: 0; } }
.kfx.luz { background: radial-gradient(circle at 50% 40%, rgba(255, 245, 190, .85), rgba(255, 230, 150, .25) 40%, transparent 70%); animation: kdglow 3s ease-in-out infinite; }
@keyframes kdglow { 50% { opacity: .55; transform: scale(1.08); } }
.kfx.ondas i { position: absolute; left: -50%; bottom: -8px; width: 200%; height: 46px; z-index: 3; background: radial-gradient(circle at 20px -6px, transparent 22px, rgba(70, 150, 200, .78) 23px) 0 0 / 40px 46px repeat-x; animation: kdwave 3s linear infinite; }
.kfx.ondas i + i { bottom: -18px; opacity: .7; animation-duration: 4.4s; animation-direction: reverse; }
@keyframes kdwave { to { transform: translateX(40px); } }
.kfx.ondas { z-index: 3; }
/* palavra sendo lida */
.kd-text span { border-radius: 6px; transition: background .15s, color .15s; }
.kd-text span.rd { background: #ffe39a; color: #6a2f00; }
/* entradas em cascata */
.kd-story, .kd-pic, .kd-word, .kd-stk { animation: kdcard .45s cubic-bezier(.3, 1.4, .5, 1) var(--d, 0ms) both; }
@keyframes kdcard { from { transform: translateY(14px) scale(.9); opacity: 0; } }
.kd-stk.got { transform: rotate(var(--r, -2deg)); }
.kd-pic.ok, .kd-word.ok { animation: pop .5s ease; }
.kd-pic.hint, .kd-word.hint { animation: kdhint .9s ease-in-out infinite; border-color: #f5b951; box-shadow: 0 6px 0 #e3a43c, 0 0 0 4px rgba(245, 185, 81, .35); }
@keyframes kdhint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px) scale(1.04); } }
.kd-pic.no { animation: none; } .kd-word.no { animation: none; }
#kdAfter .pop { animation: pop .4s ease; }
.kd-prog { height: 14px; border-radius: 999px; background: rgba(255, 253, 246, .7); border: 2px solid #f0d6a8; overflow: hidden; margin: 0 0 12px; }
.kd-prog i { display: block; height: 100%; background: linear-gradient(90deg, #ffd98a, #f5b951); border-radius: 999px; transition: width .6s; }
.kd-stories { grid-template-columns: 1fr 1fr; }
@media (prefers-reduced-motion: reduce) { .nine *, .kd-art span, .kfx i, .kfx { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }
.kids-banner img { animation: luwave 2.6s ease-in-out infinite; transform-origin: 50% 92%; }
.beta-tag { display: inline-block; margin: 2px auto 6px; padding: 3px 12px; border-radius: 999px; background: #ffcf6e; color: #5a2f05; font-weight: 800; font-size: .74rem; letter-spacing: .12em; }
.kd-win .kd-nine.solo { margin-top: 34px; }
.kd-stk { aspect-ratio: auto; min-height: 132px; }
.kd-stk:not(.got) span { opacity: .55; filter: grayscale(.5); }

/* ===================== v1.4 — Nine discreta nos jogos dos adultos ===================== */
.section-title.daily { align-items: flex-end; }
.hub-nine { width: 58px; margin: -26px 4px -4px auto; }
.section-title.daily > span { margin-left: 0; }
.hero-nine { position: absolute; right: 8px; top: 8px; width: 66px; z-index: 2; }
.nine-peek { position: fixed; right: 10px; bottom: calc(14px + var(--safe-bottom, 0px)); z-index: 60; pointer-events: none; animation: lupeek .55s cubic-bezier(.3, 1.4, .5, 1) both; }
.nine-peek .nine { width: 104px; }
.nine-peek.out { animation: lupeekout .55s ease-in both; }
@keyframes lupeek { from { transform: translateY(140%); } }
@keyframes lupeekout { to { transform: translateY(140%); opacity: 0; } }

/* ===================== v1.5 — A Grande História da Bíblia ===================== */
.kd-hbanner { position: relative; display: flex; gap: 12px; align-items: center; width: 100%; margin: 12px 0 2px; padding: 14px; border-radius: 24px; text-align: left; color: #fff8e6; background: linear-gradient(135deg, #7a4a1c, #a8692a 55%, #c98a3a); border: 2px solid #e8b964; box-shadow: 0 14px 26px -14px rgba(120, 60, 10, .7); animation: kdcard .45s ease both; }
.kd-hbanner .ic { font-size: 2.6rem; flex: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.kd-hbanner .tx { display: grid; gap: 3px; flex: 1; }
.kd-hbanner b { font-family: var(--display); font-size: 1.12rem; } .kd-hbanner small { font-size: .8rem; color: #ffe9c2; }
.kd-hbanner .nw { position: absolute; top: -8px; right: 10px; }
.kd-hbanner .bar, .kd-tnode .bar { display: block; height: 7px; border-radius: 9px; background: rgba(255,255,255,.3); overflow: hidden; }
.kd-hbanner .bar u, .kd-tnode .bar u { display: block; height: 100%; background: #ffd27a; text-decoration: none; }
.kd-hnext { margin: 2px 0 12px; min-height: 58px; border-radius: 20px; }
.kd-trail { position: relative; display: grid; gap: 10px; padding: 4px 0 6px; }
.kd-trail::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: repeating-linear-gradient(#e3b874 0 10px, transparent 10px 18px); border-radius: 4px; }
.kd-tsep { position: relative; justify-self: center; padding: 4px 14px; border-radius: 999px; background: #8a4f16; color: #fff3d6; font-family: var(--display); font-size: .86rem; letter-spacing: .06em; z-index: 1; }
.kd-tnode { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 78%; padding: 10px 12px; border-radius: 22px; background: #fffdf6; border: 2px solid #f0c98a; text-align: left; color: #4a2f15; box-shadow: 0 8px 16px -10px rgba(120, 70, 10, .45); animation: kdcard .45s cubic-bezier(.3,1.4,.5,1) var(--d) both; }
.kd-tnode.l { justify-self: start; } .kd-tnode.r { justify-self: end; flex-direction: row-reverse; text-align: right; }
.kd-tnode .dot { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; background: linear-gradient(180deg, #ffd98a, #f5b951); border: 3px solid #fff; box-shadow: 0 0 0 2px #d8902a; }
.kd-tnode .tx { display: grid; gap: 1px; flex: 1; min-width: 0; }
.kd-tnode .tx small { font-size: .72rem; color: #8a6a4a; } .kd-tnode .tx b { font-family: var(--display); font-size: 1rem; line-height: 1.15; } .kd-tnode .tx em { font-style: normal; font-size: .78rem; color: #8a6a4a; }
.kd-tnode .bar { background: #f3e2c3; margin-top: 4px; } .kd-tnode .bar u { background: linear-gradient(90deg, #ffd98a, #f5b951); }
.kd-tnode.soon { opacity: .62; background: #f6ead2; border-style: dashed; box-shadow: none; } .kd-tnode.soon .dot { filter: grayscale(.7); background: #eadbc0; box-shadow: 0 0 0 2px #d9c39b; }
.kd-tnode .sn { font-weight: 700; color: #a08a6a; }
.kd-tnode.full .dot { background: linear-gradient(180deg, #b9e3a8, #6fb07c); }
.kd-arc { position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 18px 16px; margin-bottom: 12px; }
.kd-arc .ic { font-size: 3rem; } .kd-arc h2 { font-family: var(--display); color: #8a4f16; margin: 0; } .kd-arc small { color: #8a6a4a; font-weight: 700; } .kd-arc p { color: #5a3a1a; line-height: 1.5; margin: 6px 0 0; }
.kd-steps { display: grid; gap: 8px; }
.kd-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 20px; background: #fffdf6; border: 2px solid #f0d6a8; text-align: left; color: #4a2f15; animation: kdcard .4s ease var(--d) both; }
.kd-step i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: #f3e2c3; color: #8a4f16; }
.kd-step .ic { font-size: 1.7rem; } .kd-step .tx { display: grid; } .kd-step b { font-size: 1.02rem; } .kd-step small { color: #8a6a4a; font-size: .8rem; }
.kd-step.ok i { background: #6fb07c; color: #fff; } .kd-step.now { border-color: #d8902a; box-shadow: 0 0 0 3px rgba(245, 185, 81, .35); }
.kd-lhead { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 16px; margin-bottom: 10px; }
.kd-lhead .ic { font-size: 3rem; animation: kdart .6s cubic-bezier(.3,1.6,.5,1) both; } .kd-lhead h2 { font-family: var(--display); color: #8a4f16; margin: 0; } .kd-lhead small { color: #8a6a4a; font-weight: 700; }
.kd-bubble > small:first-child { display: block; font-weight: 800; color: #b05a12; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.kd-big { min-height: 60px; border-radius: 20px; margin-top: 6px; }
.kd-dots.lesson { flex-wrap: wrap; align-items: center; } .kd-dots.lesson b { font-size: .9rem; opacity: .55; }
.kd-card { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 22px 18px; margin: 4px 0 12px; border-radius: 28px; border: 3px solid #f0c98a; background: #fffdf6; animation: kdpop .45s cubic-bezier(.3,1.5,.5,1); }
.kd-card .sym { font-size: 3rem; line-height: 1; animation: kdfloat 3s ease-in-out infinite; }
.kd-card small { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; color: #b05a12; }
.kd-card p { font-size: 1.22rem; line-height: 1.5; color: #4a2f15; margin: 0; }
.kd-card cite { font-style: normal; font-weight: 800; color: #8a4f16; }
.kd-card.deus { background: linear-gradient(180deg, #fffdf6, #fff3d2); }
.kd-card.jesus { background: radial-gradient(circle at 50% 0%, #fff7d6, #fde9b8 70%); border-color: #d8a344; box-shadow: 0 0 0 6px rgba(255, 220, 140, .35), 0 18px 30px -18px rgba(140, 90, 10, .6); }
.kd-card.verso p { font-family: var(--display); font-size: 1.3rem; }
.kd-sticker.small { width: 170px; padding: 12px 8px; } .kd-sticker.small span { font-size: 3rem; }
.kd-parents { margin-top: 14px; padding: 12px 16px; } .kd-parents summary { font-weight: 800; color: #8a4f16; cursor: pointer; } .kd-parents p { color: #5a3a1a; line-height: 1.55; margin: 8px 0 0; }
.kd-tarc { margin: 0 0 8px; padding: 10px 14px; } .kd-tarc summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; color: #8a4f16; } .kd-tarc summary small { color: #8a6a4a; }
.kd-tl { display: flex; gap: 8px; align-items: center; width: 100%; padding: 8px 4px; border-top: 1px dashed #ead2a6; text-align: left; color: #4a2f15; }
.kd-tl i { font-style: normal; font-weight: 800; color: #8a4f16; width: 22px; } .kd-tl b { flex: 1; } .kd-tl small { color: #8a6a4a; font-size: .74rem; }
.kd-card.jesus .sym .cross { width: 40px; height: 54px; display: block; filter: drop-shadow(0 3px 6px rgba(120,80,10,.4)); }
.kd-dots.lesson .cr .cross { width: 11px; height: 15px; display: block; }
.kd-ref { margin: -4px 4px 10px; text-align: right; font-size: .82rem; font-weight: 700; color: #8a6a4a; letter-spacing: .01em; }

/* ===== Dentro do app do iPhone ===== */
html.in-app { -webkit-touch-callout: none; }
html.in-app body { -webkit-user-select: none; user-select: none; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
html.in-app input, html.in-app textarea { -webkit-user-select: text; user-select: text; }
#appTabs { display: none; }
html.in-app.has-tabs #appTabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(15, 40, 28, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(233, 207, 140, .25); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
html.in-app body.kids #appTabs { background: rgba(255, 250, 238, .94); border-top-color: #f0d6a8; }
#appTabs button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 4px 2px; color: rgba(255, 250, 235, .72); font: 600 11px/1.1 var(--sans, system-ui), system-ui, sans-serif; }
#appTabs button i { font-style: normal; font-size: 21px; line-height: 1.1; filter: grayscale(.35); opacity: .85; }
#appTabs button.on { color: #f3d58f; }
#appTabs button.on i { filter: none; opacity: 1; transform: scale(1.08); }
html.in-app body.kids #appTabs button { color: #8a6a4a; }
html.in-app body.kids #appTabs button.on { color: #b05a12; }
html.in-app.has-tabs #app { padding-bottom: calc(var(--safe-bottom) + 92px); }

/* ---------- v2.0 · acabamento: luz, profundidade e vidro (calmo, sem efeitos de vício) ---------- */
/* atmosfera da página: luz quente vinda de cima e sombra suave embaixo */
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 42% at 50% -6%, rgba(255, 220, 140, .20), rgba(255, 220, 140, 0) 62%), radial-gradient(130% 36% at 50% 112%, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 70%); }
/* capa */
.hero { box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(216, 178, 92, .5), inset 0 0 70px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 236, 190, .45); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 40% at 50% 14%, rgba(255, 226, 150, .46), rgba(255, 200, 110, .12) 48%, rgba(255, 200, 110, 0) 72%),
              conic-gradient(from 200deg at 50% 18%, rgba(255, 232, 170, 0) 0deg, rgba(255, 232, 170, .16) 12deg, rgba(255, 232, 170, 0) 24deg, rgba(255, 232, 170, .10) 40deg, rgba(255, 232, 170, 0) 56deg, rgba(255, 232, 170, .14) 72deg, rgba(255, 232, 170, 0) 90deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .7) 55%, transparent 90%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .7) 55%, transparent 90%); }
.hero .cross { filter: drop-shadow(0 0 12px rgba(255, 214, 120, .75)) drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.hero h1 .gold-text { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .75)) drop-shadow(0 0 10px rgba(0, 0, 0, .35)); background: linear-gradient(100deg, #e0b95c 0%, #f3d98d 40%, #fff3c8 50%, #f3d98d 60%, #d4a74a 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; animation: shine 11s ease-in-out infinite; }
@keyframes shine { 0%, 62% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.hero .verse { background: var(--paper-noise), linear-gradient(180deg, rgba(255, 252, 244, .97), rgba(244, 232, 205, .95)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .65), 0 0 0 1px rgba(216, 178, 92, .55), inset 0 1px 0 #fff, inset 0 0 0 3px rgba(255, 255, 255, .28); }
.hero .motes { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .75;
  background: radial-gradient(circle 2px at 14% 62%, rgba(255, 236, 180, .9), transparent 70%), radial-gradient(circle 1.5px at 28% 38%, rgba(255, 236, 180, .8), transparent 70%), radial-gradient(circle 2px at 71% 46%, rgba(255, 236, 180, .85), transparent 70%), radial-gradient(circle 1.5px at 86% 70%, rgba(255, 236, 180, .8), transparent 70%), radial-gradient(circle 1.5px at 58% 22%, rgba(255, 236, 180, .7), transparent 70%), radial-gradient(circle 2px at 40% 74%, rgba(255, 236, 180, .7), transparent 70%);
  animation: motes 16s ease-in-out infinite alternate; }
@keyframes motes { from { transform: translateY(10px); opacity: .45; } to { transform: translateY(-14px); opacity: .85; } }
/* pergaminho com brilho no topo e borda quente embaixo */
.parch { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 46%), var(--paper-noise), radial-gradient(120% 90% at 50% 0%, var(--parch-50) 0%, var(--parch-100) 55%, var(--parch-200) 100%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(196, 154, 62, .20), inset 0 0 0 4px rgba(255, 255, 255, .16); }
/* ícones dourados com relevo */
.gtile .gi, .today .ti, .daily-card .dc-sun { box-shadow: inset 0 1px 0 rgba(255, 250, 225, .85), inset 0 -4px 8px rgba(120, 80, 10, .28), 0 8px 14px -6px rgba(60, 35, 0, .6); }
.continue .thumb { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 6px 12px -6px rgba(60, 35, 0, .55); }
/* cartões dos jogos: luz de cima e fio dourado */
.gtile { box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 240, 200, .38), inset 0 0 0 1px rgba(255, 255, 255, .05); border-color: rgba(233, 207, 140, .6); }
.gtile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(255, 236, 184, .20) 0%, rgba(255, 236, 184, 0) 40%); }
.gtile .pg i { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45); }
.gtile .pg u { box-shadow: 0 0 8px rgba(233, 207, 140, .6); border-radius: 3px; }
/* títulos de seção */
.section-title { position: relative; padding-bottom: 7px; }
.section-title::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(216, 178, 92, .6), rgba(216, 178, 92, 0)); }
.section-title h2 { display: flex; align-items: center; gap: 9px; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.section-title h2::before { content: ''; width: 7px; height: 7px; transform: rotate(45deg); border-radius: 1px; background: var(--gold-grad); box-shadow: 0 0 8px rgba(233, 207, 140, .7); flex: none; }
/* Cantinho Kids: brilho suave */
.kids-banner { box-shadow: 0 14px 24px -14px rgba(120, 70, 10, .55), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -3px 0 rgba(240, 190, 110, .35); }
/* barra de abas em vidro */
html.in-app.has-tabs #appTabs { background: linear-gradient(180deg, rgba(22, 56, 39, .72), rgba(10, 28, 20, .94)); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); border-top: 1px solid rgba(216, 178, 92, .38); box-shadow: 0 -12px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 236, 190, .12); }
#appTabs button { position: relative; transition: color .2s; }
#appTabs button.on i { filter: drop-shadow(0 0 8px rgba(243, 213, 143, .65)); }
#appTabs button.on::after { content: ''; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px; border-radius: 2px; background: var(--gold-grad); box-shadow: 0 0 8px rgba(233, 207, 140, .8); }
html.in-app body.kids #appTabs { background: linear-gradient(180deg, rgba(255, 252, 242, .86), rgba(255, 244, 222, .96)); }
/* entrada suave dos cartões (uma vez, ao abrir a tela) */
@keyframes cardin { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.today-row .today, .gtiles .gtile, .kids-banner, .continue { animation: cardin .5s cubic-bezier(.2, .8, .3, 1) both; }
.today-row .today:nth-child(2) { animation-delay: .05s; } .kids-banner { animation-delay: .1s; }
.gtiles .gtile:nth-child(1) { animation-delay: .05s; } .gtiles .gtile:nth-child(2) { animation-delay: .09s; } .gtiles .gtile:nth-child(3) { animation-delay: .13s; } .gtiles .gtile:nth-child(4) { animation-delay: .17s; } .gtiles .gtile:nth-child(5) { animation-delay: .21s; } .gtiles .gtile:nth-child(6) { animation-delay: .25s; } .gtiles .gtile:nth-child(n+7) { animation-delay: .29s; }
@media (prefers-reduced-motion: reduce) { .hero h1 .gold-text, .hero .motes, .today-row .today, .gtiles .gtile, .kids-banner, .continue { animation: none !important; } }

/* v2.0 · sem zoom por toque duplo (app) */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; }

/* ---- v2.0 · Labirinto e Quebra-Cabeça ---- */
.lb-story { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; margin: 8px 0; border-radius: 14px; }
.lb-story b { font-family: var(--display); color: var(--ink-900); }
.lb-story span { color: var(--ink-700, #5a4a2c); font-size: .95rem; }
.lb-wrap, .qb-wrap { display: flex; justify-content: center; margin: 6px 0; }
.lb { touch-action: none; user-select: none; -webkit-user-select: none; max-width: 100%; height: auto; }
.lb-bg { fill: #fbf3dc; stroke: #cdb27e; stroke-width: 2; }
.lb-border, .lb-walls { fill: none; stroke: #5b4a2a; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.lb-trail { fill: none; stroke: #d8b25c; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.lb-hint { fill: none; stroke: #3b7454; stroke-width: 5; stroke-dasharray: 2 9; stroke-linecap: round; }
.lb-me { fill: #fffaf0; stroke: #c49a3e; stroke-width: 2.5; }
.lb-goal { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.lb-tools { display: flex; gap: 10px; justify-content: center; margin: 8px 0; }
.qb { position: relative; border-radius: 10px; overflow: hidden; background: #e9dfc6; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); touch-action: none; user-select: none; -webkit-user-select: none; }
.qb-p { position: absolute; left: 0; top: 0; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(60, 40, 10, .25); transition: transform .22s ease; cursor: grab; display: grid; place-items: center; }
.qb-p i { display: none; font-style: normal; font-weight: 700; color: #fff; background: rgba(40, 30, 10, .55); border-radius: 50%; min-width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center; font-size: .8rem; }
.qb.nums .qb-p i { display: block; }
.qb-p.lift { transition: none; z-index: 5; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.qb-p.sel { outline: 3px solid #d8b25c; outline-offset: -3px; z-index: 3; }
.qb-p.ok { box-shadow: inset 0 0 0 2px rgba(216, 178, 92, .9); cursor: default; }
.qb.full .qb-p { border-color: transparent; box-shadow: none; }
.qb-model { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s; background-repeat: no-repeat; z-index: 8; }
.qb-model.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .qb-p { transition: none; } }

/* ---- v2.1 · Colorir ---- */
.cl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 10px; }
.cl-card { display: grid; gap: 2px; text-align: left; padding: 8px 8px 10px; border-radius: 16px; background: rgba(255, 250, 235, .94); border: 1.5px solid rgba(216, 178, 92, .6); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .55); color: var(--ink-900, #2a2218); }
.cl-card .cl-th { position: relative; display: block; border-radius: 10px; overflow: hidden; background: #fff; aspect-ratio: 4/3; }
.cl-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cl-card .cl-th em { position: absolute; left: 6px; bottom: 6px; font-style: normal; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(46, 107, 72, .92); color: #fff; }
.cl-card .cl-th em.wip { background: rgba(196, 154, 62, .95); color: #3b2a0c; }
.cl-card b { font-family: var(--display); font-size: .95rem; line-height: 1.2; margin-top: 4px; }
.cl-card small { color: var(--gold-700); font-weight: 600; font-size: .78rem; }
.cl-card.done { border-color: #4f9a6c; }
.win-card .wc-learned svg { width: 16px; height: 16px; vertical-align: -2px; }

/* ---- v2.1 · Colorir em tela cheia ---- */
html.cl-on, html.cl-on body { overflow: hidden; overscroll-behavior: none; }
html.cl-on #appTabs { display: none !important; }
.cl-full { position: fixed; inset: 0; width: 100%; overflow: hidden; z-index: 40; display: flex; flex-direction: column; background: linear-gradient(180deg, #17261e, #0d1a14); color: var(--parch-50); padding: var(--safe-top) max(0px, env(safe-area-inset-right, 0px)) 0 max(0px, env(safe-area-inset-left, 0px)); overscroll-behavior: none; }
.cl-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; flex: none; }
.cl-head .icon-btn { width: 44px; height: 44px; border-radius: 13px; font-size: 1.3rem; }
.cl-head .ttl { flex: 1; min-width: 0; text-align: center; }
.cl-head .ttl b { display: block; font-family: var(--display); font-size: .98rem; color: var(--gold-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-head .ttl small { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--parch-100); opacity: .9; }
.cl-head .ttl small svg { width: 14px; height: 14px; }
.cl-zoom { display: flex; gap: 6px; }
.cl-view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; background: #0f1d16; }
.cl-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.cl-world canvas, .cl-world img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cl-world .cl-lines { mix-blend-mode: multiply; pointer-events: none; }
.cl-load { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 29, 22, .94); color: var(--parch-100); font-style: italic; text-align: center; padding: 20px; z-index: 3; }
.cl-hint { position: absolute; left: 50%; bottom: 10px; width: max-content; transform: translateX(-50%); max-width: 92%; padding: 6px 14px; border-radius: 999px; background: rgba(10, 26, 18, .82); color: var(--parch-100); font-size: .82rem; text-align: center; pointer-events: none; transition: opacity .6s; z-index: 2; }
.cl-hint.off { opacity: 0; }
.cl-dock { flex: none; min-width: 0; display: grid; gap: 8px; padding: 10px 10px calc(10px + var(--safe-bottom)); background: linear-gradient(180deg, rgba(255, 250, 235, .1), rgba(255, 250, 235, .04)); border-top: 1px solid rgba(216, 178, 92, .4); }
.cl-pal { display: grid; gap: 6px; }
.cl-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.cl-row.v { padding: 0; }
.cl-sw { width: 100%; max-width: 46px; justify-self: center; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .35); transition: transform .12s; }
.cl-sw.on { transform: scale(1.14); border: 3px solid #e9cf8c; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 3px 8px rgba(0, 0, 0, .45); }
.cl-act { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cl-act .btn { min-height: 46px; padding: 0 2px; font-size: .76rem; white-space: nowrap; min-width: 0; letter-spacing: -.01em; }
.cl-act .btn.on { background: var(--gold-grad); color: #3b2a0c; border-color: #a47b2a; }
.cl-full .btn-ghost { background: rgba(255, 250, 235, .12); color: var(--parch-50); border: 1px solid rgba(216, 178, 92, .5); }
.cl-full .btn-ghost.on { color: #3b2a0c; }
/* celular deitado: paleta fica ao lado e o desenho ocupa o resto */
@media (orientation: landscape) and (max-height: 560px) {
  .cl-full { display: grid; grid-template-columns: 1fr 230px; grid-template-rows: auto 1fr; }
  .cl-head { grid-column: 1 / -1; padding: 4px 10px; }
  .cl-head .icon-btn { width: 38px; height: 38px; }
  .cl-view { grid-column: 1; grid-row: 2; }
  .cl-dock { grid-column: 2; grid-row: 2; border-top: 0; border-left: 1px solid rgba(216, 178, 92, .4); align-content: start; overflow: auto; padding: 8px 10px calc(8px + var(--safe-bottom)); }
  .cl-pal { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
  .cl-row, .cl-row.v { display: contents; }
  .cl-sw { max-width: 30px; }
  .cl-pal { gap: 4px; }
  .cl-dock { gap: 6px; }
  .cl-full { grid-template-columns: 1fr 300px; }
  .cl-act { grid-template-columns: 1fr 1fr; }
}

/* v2.1 · Edição de Natal */
.nt-banner { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 4px; padding: 12px 16px; border-radius: 22px; text-align: left; color: #fff7e2; background: radial-gradient(120% 140% at 15% 0%, #35508a 0%, #1b2a54 55%, #101a38 100%); border: 1.5px solid rgba(233, 207, 140, .75); box-shadow: 0 8px 18px rgba(10, 18, 46, .35); }
.nt-banner .nt-star { font-size: 2.2rem; filter: drop-shadow(0 0 8px rgba(255, 220, 120, .8)); flex: none; }
.nt-banner b { display: block; font-family: var(--display); font-size: 1.2rem; color: #f6dc9b; }
.nt-banner div > span { display: block; font-size: .9rem; opacity: .9; margin-top: 2px; }
.nt-hero { position: relative; overflow: hidden; text-align: center; padding: 26px 18px 20px; margin: 4px 0 6px; border-radius: 26px; color: #fff7e2; background: radial-gradient(120% 120% at 50% 0%, #3c5a99 0%, #1c2b58 55%, #0f1936 100%); border: 1.5px solid rgba(233, 207, 140, .7); }
.nt-glow { position: absolute; left: 50%; top: -30px; width: 240px; height: 240px; margin-left: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 224, 140, .55), rgba(255, 224, 140, 0) 65%); pointer-events: none; }
.nt-big { position: relative; font-size: 3rem; filter: drop-shadow(0 0 12px rgba(255, 220, 120, .9)); }
.nt-hero h1 { position: relative; font-family: var(--display); font-size: 1.9rem; color: #f6dc9b; margin: 4px 0 8px; }
.nt-verse { position: relative; font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 1.05rem; line-height: 1.45; margin: 0 4px 6px; }
.nt-verse cite { display: block; font-style: normal; font-size: .85rem; color: #e9cf8c; margin-top: 4px; }
.nt-hero small { position: relative; opacity: .8; }
.nt-list { display: grid; gap: 8px; }
.nt-story { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 18px; text-align: left; }
.nt-n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #7d1a2a; color: #f6dc9b; font-weight: 700; font-size: .9rem; }
.nt-ic { font-size: 1.6rem; flex: none; }
.nt-tx { flex: 1; min-width: 0; }
.nt-tx b { display: block; font-family: var(--display); font-size: 1.05rem; color: var(--ink, #3b2a0c); }
.nt-tx small { display: flex; align-items: center; gap: 4px; color: var(--gold-700, #8a6a1a); }
.nt-tx small svg { width: 14px; height: 14px; }
.nt-story em { font-style: normal; font-weight: 800; color: #2e7d4f; font-size: 1.2rem; flex: none; }
.nt-story.ok { opacity: .92; }
.nt-draws { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.nt-draw { display: grid; gap: 2px; padding: 8px; border-radius: 18px; text-align: left; background: #fbf6e8; border: 1.5px solid rgba(216, 178, 92, .6); }
.nt-draw img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; background: #fff; }
.nt-draw b { font-family: var(--display); font-size: .98rem; color: #3b2a0c; margin-top: 4px; }
.nt-draw small { color: #8a6a1a; }
.nt-draw.ok { outline: 2.5px solid #2e7d4f; }
.nt-foot { text-align: center; color: var(--parch-100, #f4e9cf); opacity: .9; margin: 18px 8px 8px; font-size: .95rem; }
.nt-tabs { display: grid; gap: 10px; margin-top: 10px; }
.nt-tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 20px; text-align: left; color: #fff7e2; background: linear-gradient(180deg, #2c4276, #1b2a54); border: 1.5px solid rgba(233, 207, 140, .7); box-shadow: 0 6px 14px rgba(10, 18, 46, .3); }
.nt-tab .nt-ti { font-size: 1.8rem; flex: none; }
.nt-tab .nt-tt { flex: 1; min-width: 0; }
.nt-tab b { display: block; font-family: var(--display); font-size: 1.1rem; color: #f6dc9b; }
.nt-tab small { opacity: .9; }
.nt-tab i { font-style: normal; font-size: 1.3rem; color: #f6dc9b; transition: transform .2s; }
.nt-tab.on i { transform: rotate(180deg); }
.nt-tab.on { background: linear-gradient(180deg, #d9b45a, #b88a2c); color: #3b2a0c; }
.nt-tab.on b, .nt-tab.on i { color: #3b2a0c; }
.nt-panel { padding: 2px 0 6px; }
.nt-panel[hidden] { display: none; }
/* Natal: fundo animado vermelho e verde */
.nt-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; background: linear-gradient(135deg, #8f1d2c, #1f6b45); }
html.nt-on #app { position: relative; z-index: 1; }
html.nt-on .topbar .ttl, html.nt-on .nt-foot { text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.nt-hero { background: rgba(24, 8, 12, .38) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-color: rgba(233, 207, 140, .8) !important; }
.nt-glow { background: radial-gradient(circle, rgba(255, 224, 140, .45), rgba(255, 224, 140, 0) 65%) !important; }
.nt-tab[data-tab="h"] { background: linear-gradient(180deg, #b32d40, #7d1a2a); }
.nt-tab[data-tab="d"] { background: linear-gradient(180deg, #2f8a58, #1b5a3b); }
.nt-tab.on { background: linear-gradient(180deg, #e3c06a, #b88a2c) !important; }
.nt-banner { background: linear-gradient(135deg, #a3222f 0%, #7c1c2a 45%, #1d6a45 100%) !important; }
.nt-snow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.nine .lu-hat { position: absolute; height: auto; pointer-events: none; transform-origin: 50% 80%; filter: drop-shadow(0 3px 4px rgba(90, 10, 20, .3)); z-index: 2; }
.nine { overflow: visible; }
/* Início: versículo menor, para aparecer mais a foto da tumba vazia */
.hero .verse { margin-top: 10px; max-width: 330px; padding: 8px 12px; font-size: .8rem; line-height: 1.35; background: var(--paper-noise), linear-gradient(180deg, rgba(255, 252, 244, .86), rgba(244, 232, 205, .82)); }
.hero .verse cite { margin-top: 3px; font-size: .7rem; }
/* Natal: touca no canto do cartão */
.nt-heroW { position: relative; }
.nt-hat { position: absolute; left: -10px; top: -14px; width: 84px; height: auto; transform: rotate(-18deg); z-index: 3; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }

/* ===================== Apresentação da Nine (uma vez) ===================== */
.nine-hi { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 12, 6, .55); opacity: 0; transition: opacity .35s ease; }
.nine-hi.on { opacity: 1; }
.nh-card { width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 20px 20px; border-radius: 28px; background: linear-gradient(180deg, #fff8e6, #fbe9c4); border: 2px solid #f0c98a; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); transform: translateY(14px) scale(.97); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.nine-hi.on .nh-card { transform: none; }
.nh-card .nh-nine { width: 150px; }
.nh-bubble { text-align: center; font-size: 1.12rem; line-height: 1.45; color: #5a3a1a; }
.nh-bubble b { color: #b05a12; }
.nh-btn { appearance: none; border: 0; border-radius: 999px; padding: 12px 26px; font: inherit; font-weight: 700; font-size: 1.02rem; color: #fff; background: linear-gradient(180deg, #e8923a, #c9701c); box-shadow: 0 4px 12px rgba(160, 80, 10, .35); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .nine-hi, .nh-card { transition: none; } }

/* Natal: cartão do desenho mostra a pintura salva e a etiqueta de estado, como no Colorir */
.nt-draw .nt-th { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #fff; aspect-ratio: 4/3; }
.nt-draw .nt-th img { display: block; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
.nt-draw .nt-th em { position: absolute; left: 6px; bottom: 6px; font-style: normal; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(46, 107, 72, .92); color: #fff; }
.nt-draw .nt-th em.wip { background: rgba(196, 154, 62, .95); color: #3b2a0c; }