/* The verse game (screens/versegame.js) and the Bible screen's reward chips */

/* reward chips: what reading or learning gives */
.rchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rchip { font: 900 11px/1 var(--body); padding: 4px 7px; border-radius: 999px; background: #e8ffe9; color: #1f7a00; border: 1.5px solid #9fdca6; white-space: nowrap; }
.rchip.cards { background: #fff3c4; color: #8a5a00; border-color: #f0c948; }
.rchip.rank { background: #f1e6ff; color: #5a189a; border-color: #c9a5f0; }
.rchip.armor { background: #e6f0ff; color: #1d4ed8; border-color: #9cbcf5; }
.rchip.verses { background: #fff; color: var(--ink2); border-color: #d8cde6; }
.readok { display: inline-flex; align-items: center; gap: 3px; font: 900 12px/1 var(--body); color: #1f7a00; white-space: nowrap; }
.readok svg { width: 14px; height: 14px; }
.prow, .vrow { cursor: pointer; }
.prow.read .h { color: var(--ink2); }
.vrow .ladder { margin-left: 8px; }
.vsnip { font: 600 13.5px/1.35 Georgia, serif; color: #4b3f5e; margin-top: 3px; }
.vstatus { margin-top: 3px; color: var(--muted); display: flex; align-items: center; gap: 3px; }
.vstatus svg { width: 13px; height: 13px; }
.vstatus.mastered, .vstatus.today { color: #1f7a00; }
.vintro { margin-top: 12px; background: linear-gradient(160deg, #fff, #f3ecff); }
.votd .btn { font-size: 16px; padding: 10px 14px; }

/* the game screen */
.vg .scroll { padding-bottom: 40px; }
.vghead { padding-bottom: 10px; }
.vgref { font-size: 22px; transition: filter .3s; }
.vgref.hideref { filter: blur(7px); }
.vglisten { font-size: 14px; padding: 7px 10px; gap: 5px; }
.vglisten svg { width: 20px; height: 20px; }
.vglisten.on { background: var(--gold); animation: pulse 1.2s infinite; }
.vgsteps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 10px; }
.vgstep { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
.vgstep i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 400 15px/1 var(--head); font-style: normal; background: #fff; border: 2.5px solid #c9bfd8; color: #9d91b0; }
.vgstep i svg { width: 16px; height: 16px; }
.vgstep span { font: 900 10.5px/1 var(--body); color: #9d91b0; }
.vgstep.done i { background: #38b000; border-color: var(--ink); color: #fff; }
.vgstep.done span { color: #1f7a00; }
.vgstep.on i { border-color: var(--ink); box-shadow: 0 0 0 3px var(--gold); color: var(--ink); }
.vgstep.on:not(.done) i { background: var(--gold); }
.vgstep.on span { color: var(--ink); }
.vgstep.locked { opacity: .45; cursor: default; }
.vgstep.popin i { animation: popin .6s cubic-bezier(.3, 1.6, .5, 1); }

.vgboard { margin-top: 12px; }
.vgboard.over .vgtiles, .vgboard.over .vgpick, .vgboard.over .vgtype, .vgboard.over [data-note] { display: none; }
.vgtitle { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vgtitle .h { font-size: 18px; }
.vghow { font-weight: 800; color: var(--ink2); margin-top: 2px; }

.vgverse { font: 700 18px/1.65 Georgia, serif; color: #2a2118; margin: 12px 0 6px; padding: 10px 12px; background: #fffaf0; border: 2px solid #eadfc8; border-radius: 14px; }
.vgverse .ph { border-radius: 8px; padding: 1px 0; transition: background .25s, color .25s; }
.vgverse .ph.lit { background: #fff1a8; box-shadow: 0 0 0 2px #fff1a8; }
.vgverse .ph.lit .w { animation: glowword .7s ease-out both; }
.vgverse .ph.hint { animation: hintph .9s ease-out; }
.vgverse .w { border-radius: 5px; transition: background .15s, color .3s; }
.vgverse .w.say { background: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.vgverse.ghost .ph { color: rgba(42, 33, 24, .2); }
.vgverse.ghost .ph.lit { color: #2a2118; }
.vgverse.ghost .w.heard, .vgverse.ghost .w.say { color: rgba(42, 33, 24, .45); }
.vgverse.ghost .ph.lit .w { color: #2a2118; }

.vgtiles, .vgpick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.tile { font: 800 15px/1.25 var(--body); color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 9px 12px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: transform .12s; max-width: 100%; }
.tile:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.tile.word { font-size: 16px; min-width: 64px; }
.tile.used { animation: tileout .35s ease-in forwards; pointer-events: none; }
.tile.wrong { background: #ffd6d6; opacity: .55; }
.tile.nudge { animation: nudge 1s ease-in-out infinite; background: #fff6c9; }
.shake { animation: shake .4s; }

.gap { display: inline-block; min-width: 70px; border-bottom: 4px solid #c9bfd8; margin: 0 2px; text-align: center; color: var(--blue); }
.gap.cur { border-bottom-color: var(--gold2); background: #fff3c4; border-radius: 6px 6px 0 0; animation: gapblink 1.1s ease-in-out infinite; }
.gap.filled { color: #1f7a00; border-bottom-color: #38b000; background: #e8ffe9; border-radius: 6px 6px 0 0; padding: 0 4px; min-width: 0; animation: none; }

.vgverse.letters { word-spacing: 3px; }
.lt { color: #8a7fa0; border-radius: 5px; padding: 0 1px; cursor: default; }
.lt.cur { color: var(--ink); background: #fff3c4; box-shadow: 0 0 0 2px var(--gold); cursor: pointer; }
.lt.got { color: #1f7a00; }
.lt.shown { color: var(--purple); }
.popin { animation: popin .45s cubic-bezier(.3, 1.6, .5, 1); display: inline-block; }
.vgtype { margin-top: 10px; }
.vgtype input { flex: 1; min-width: 0; font: 700 16px/1.2 var(--body); border: 3px solid var(--ink); border-radius: 12px; padding: 9px 10px; }
.vgtype .btn { white-space: nowrap; }

/* finished */
.vgdone { margin-top: 12px; text-align: center; animation: slideup .35s ease-out; }
.vgdone.good { background: linear-gradient(160deg, #f4fff5, #d8f5dc); }
.vgdone.bad { background: #fff6ee; }
.vgdonetitle { font-size: 26px; }
.vgdone.good .vgdonetitle { color: #1f7a00; -webkit-text-stroke: 0; }
.vgdetail { font-weight: 800; font-size: 13.5px; margin-top: 4px; text-align: left; }
.vgdetail:not(:has(.recalldiff)) { text-align: center; }
.vgglow { font: 700 16px/1.6 Georgia, serif; margin-top: 10px; padding: 10px 12px; background: #fffdf5; border: 2px solid #eadfc8; border-radius: 12px; text-align: left; }
.vgglow span { animation: glowword .8s ease-out both; border-radius: 4px; }
.vgglow b { font: 400 14px/1 var(--head); color: var(--muted); white-space: nowrap; }
.vgline { font-weight: 800; color: var(--ink2); margin-top: 8px; }
.vggains { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.vggain { display: flex; flex-direction: column; align-items: center; width: 64px; animation: popin .5s .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.vggain .berry { width: 36px; }
.vggain b { font: 900 14px/1 var(--body); color: #38b000; margin-top: 2px; }
.vggain span { font: 400 12px/1.1 var(--head); }
.vgbonus { margin-top: 12px; padding: 10px; border: 2px dashed #c9a5f0; border-radius: 12px; background: #fbf7ff; }
.vgbonus .rowwrap { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.vgbonus .btn.right { background: var(--green); }
.vgbonus .btn.wrong { background: #ffb3b3; }
.vgbonus .btn[disabled] { opacity: 1; filter: none; }
.vgbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.vgbtns .btn { font-size: 17px; padding: 12px 10px; }
.vgdone .streakline { margin-top: 10px; justify-content: center; text-align: left; }
.vgdone .recalldiff { font-size: 15.5px; line-height: 1.6; text-align: left; margin-top: 8px; background: #fffaf0; border: 2px solid #eadfc8; border-radius: 12px; padding: 8px 10px; }

@keyframes glowword { 0% { background: transparent; } 35% { background: #ffe066; box-shadow: 0 0 8px 2px #ffe066; } 100% { background: transparent; box-shadow: none; } }
@keyframes hintph { 0%, 100% { background: transparent; } 40% { background: #e0d2ff; box-shadow: 0 0 0 3px #e0d2ff; } }
@keyframes tileout { 0% { transform: scale(1); } 40% { transform: scale(1.12) translateY(-6px); background: #fff1a8; } 100% { transform: scale(.4) translateY(-30px); opacity: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px) rotate(-2deg); } 40% { transform: translateX(6px) rotate(2deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes nudge { 50% { transform: translateY(-4px); box-shadow: 0 7px 0 var(--ink), 0 0 0 3px var(--gold); } }
@keyframes gapblink { 50% { background: #ffe89a; } }
@keyframes popin { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.vgstep.popin { display: flex; animation: none; }