/* Animations outside battle (public/js/anim/): the effects layer, and the few static pieces the moments need.
   Only transform and opacity animate; under prefers-reduced-motion the JS drops movement and loops. */
#animfx { position: fixed; inset: 0; pointer-events: none; z-index: 1000; overflow: hidden; contain: layout paint; }
.ak-sp { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform, opacity; }
.ak-sp > * { position: absolute; left: 0; top: 0; translate: -50% -50%; }
.ak-sp svg { display: block; overflow: visible; }
.ak-pop { font: 400 28px/1 var(--head); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.ak-pop.gold { color: var(--gold); } .ak-pop.green { color: #7ae582; } .ak-pop.pink { color: #ffb3cf; }
.ak-toast { background: var(--gold); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); padding: 6px 11px; font: 400 16px/1.05 var(--head); color: var(--ink); white-space: nowrap; text-align: center; }
.ak-toast small { display: block; font: 900 11px/1.15 var(--body); color: #6a4a00; }
.ak-toast.white { background: #fff; } .ak-toast.white small { color: var(--muted); }
.ak-toast.pink { background: #ffd6e3; } .ak-toast.pink small { color: #8a1c3a; }
.ak-toast.wrap { white-space: normal; width: 270px; }
.ak-ribbon { position: relative; background: #e63946; color: #fff; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); padding: 6px 22px 7px; text-align: center; white-space: nowrap; z-index: 0; }
.ak-ribbon::before, .ak-ribbon::after { content: ""; position: absolute; top: 10px; width: 28px; height: 100%; background: #b5172a; border: 3px solid var(--ink); z-index: -1; }
.ak-ribbon::before { left: -22px; clip-path: polygon(0 0,100% 0,100% 100%,0 100%,30% 50%); }
.ak-ribbon::after { right: -22px; clip-path: polygon(0 0,100% 0,70% 50%,100% 100%,0 100%); }
.ak-ribbon small { display: block; font: 900 10.5px/1.1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #ffe28a; }
.ak-ribbon b { display: block; font: 400 22px/1.05 var(--head); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.ak-ribbon.gold { background: #f4a300; } .ak-ribbon.gold::before, .ak-ribbon.gold::after { background: #b86e00; }
.ak-ribbon.blue { background: #3a86ff; } .ak-ribbon.blue::before, .ak-ribbon.blue::after { background: #1d5fc4; }

/* ---------------------------------------------------------------- reading */
.passage.ak-reading { position: relative; }
.passage.ak-reading p, .passage.ak-reading .refhead { position: relative; z-index: 1; }
.ak-hl { position: absolute; z-index: 0; background: rgba(255,210,63,.42); border-radius: 7px; transform-origin: 0 50%; pointer-events: none; }
.gatebtn.ak-fillbtn { position: relative; overflow: hidden; isolation: isolate; }
.ak-fill { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #ffd23f, #fff3a8 85%, #fff); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.ak-edge { position: absolute; top: -10px; bottom: -10px; left: -40px; width: 60px; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 50%, rgba(255,255,255,0)); opacity: 0; pointer-events: none; }
.ak-seed { position: relative; width: 26px; height: 30px; }
.ak-seed::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), var(--c) 40%, transparent); opacity: .7; }
.ak-seed svg { position: relative; }

/* ---------------------------------------------------------------- verses to remember */
.vgverse.ak-words .w, .vgglow.ak-words span { display: inline-block; }
.vgglow.ak-words span { animation: none; }
.ak-flytile { 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 6px 0 var(--ink); white-space: nowrap; }
.vgdone.ak-mastered { position: relative; overflow: hidden; isolation: isolate; }
.vgdone.ak-mastered > * { position: relative; z-index: 1; }
.vgdone .ak-behind { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; }
.ak-versegold { position: absolute; inset: -6px; border-radius: 16px; background: radial-gradient(closest-side, rgba(255,214,90,.85), rgba(255,214,90,0)); opacity: 0; pointer-events: none; z-index: -1; }
.vgglow.ak-glowing { position: relative; isolation: isolate; }

/* ---------------------------------------------------------------- question cards */
.qwrap.ak-q { perspective: 900px; }
.qcard.ak-qcard { position: relative; isolation: isolate; }
.qcard.ak-qcard > *:not(.ak-qbehind) { position: relative; z-index: 1; }
.ak-qbehind { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.ak-mark { background: none; color: inherit; padding: 0; }
.ak-markhost { position: relative; isolation: isolate; }
.ak-mk { position: absolute; background: #ffe066; border-radius: 3px; z-index: -1; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------------------------------------------------------------- results */
.results.ak-results .rstar.new span { animation: none; }
.results.ak-results .rstar span svg { transform-origin: 50% 50%; }
.results.ak-results > .rbody, .results.ak-results > .taphint { position: relative; z-index: 1; }
.ak-rbehind { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lootcard.ak-card { position: relative; }
.ak-cardback { position: absolute; inset: -2.5px; border: 2.5px solid var(--ink); border-radius: 13px; background: repeating-linear-gradient(45deg, #7b2cbf 0 7px, #9d4edd 7px 14px); display: grid; place-items: center; opacity: 0; pointer-events: none; z-index: 3; }
.ak-cardback svg { width: 55%; height: auto; }
.ak-cardglow { position: absolute; inset: -14px; border-radius: 20px; z-index: -1; opacity: 0; pointer-events: none; }
.results .bar.xp > b.ak-bar { width: 100% !important; transform-origin: 0 50%; transition: none; }
.rxp .lv.ak-lv { display: inline-block; }
.rnote.join .pcard { position: relative; }
.ak-silhouette { position: absolute; inset: 0; pointer-events: none; }
.ak-silhouette svg { width: 100%; height: 100%; filter: brightness(0); }

/* ---------------------------------------------------------------- heroes */
.joinart.ak-join .pcard, .outfitreveal.ak-reveal .fig, .armorreveal.ak-armor .aic { position: relative; }
.ak-rankstats { display: grid; gap: 4px; margin: 8px auto 0; max-width: 300px; text-align: left; }
.ak-rankstats div { display: flex; align-items: center; gap: 8px; font: 800 14px/1.2 var(--body); padding: 2px 6px; border-radius: 8px; }
.ak-rankstats div b { width: 70px; font: 400 16px/1 var(--head); }
.ak-rankstats div i { flex: 1; height: 10px; border: 2px solid var(--ink); border-radius: 6px; background: #efe6fb; overflow: hidden; }
.ak-rankstats div i u { display: block; height: 100%; width: 100%; background: #ffb703; transform-origin: 0 50%; }
.ak-rankstats div span { width: 48px; text-align: right; font: 400 18px/1 var(--head); }
.ak-rankstats div em { font: 400 14px/1 var(--head); color: #2d9a2d; font-style: normal; width: 36px; }
.bigstars.ak-stars > * { display: inline-block; }
.ak-armorstage { position: relative; height: 290px; border: 3px solid var(--ink); border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #3d5a99, #1d2a4a 55%, #120b1f); }
.ak-armorstage .ak-you { position: absolute; left: 50%; bottom: 6px; width: 112px; height: 204px; margin-left: -56px; }
.ak-armorstage .ak-you svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ak-armorstage .ak-words { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 3; text-align: center; font: 700 15px/1.4 Georgia, "Iowan Old Style", serif; color: #fff; text-shadow: 0 2px 0 #0008; }
.ak-armorstage .ak-words b { display: block; font: 400 13px/1 var(--head); color: #ffe28a; margin-top: 3px; text-shadow: none; }
.ak-armorstage .ak-piece { position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px; z-index: 2; filter: drop-shadow(0 0 8px rgba(255,226,120,.9)); }
.ak-armorstage .ak-piece svg { width: 100%; height: 100%; }
.ak-armorstage .ak-piece.small { transform: scale(.62); }
.ak-armorstage [data-fullverse] { display: none; }
.ak-armorstage .ak-light { position: absolute; inset: 0; z-index: 0; }
.ak-shine { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; pointer-events: none; }
.ak-shine i { position: absolute; top: -20%; left: 0; width: 30%; height: 140%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0)); transform: translateX(-150%) rotate(25deg); }

/* ---------------------------------------------------------------- the Vine */
.milestone .mberry.ak-berry { transform-origin: 50% 12%; }
.popcard.ak-card { position: relative; }
.ak-petals { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

/* ---------------------------------------------------------------- Daily Bread */
.streakbig.ak-streak { display: flex; align-items: center; justify-content: center; gap: 6px; }
.streakbig.ak-streak .ak-flame { width: 58px; height: 78px; flex: none; transform-origin: 50% 100%; }
.streakbig.ak-streak .ak-flame g { transform-box: fill-box; transform-origin: 50% 100%; }
.streakbig.ak-streak .ak-num { display: inline-block; }
.streakbig.ak-streak .ak-nl { display: flex; flex-direction: column; align-items: flex-start; }
.streakbig.ak-streak .ak-nl .n { line-height: .9; }
.sday .ak-daystamp { position: absolute; inset: -12px; display: grid; place-items: center; pointer-events: none; z-index: 2; }
.sday .ak-daystamp svg { width: 100%; height: 100%; transform: rotate(-10deg); }
.ak-manna { position: fixed; inset: 0; pointer-events: none; z-index: 150; overflow: hidden; }
.ak-mannalight { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(rgba(255,243,176,.5), rgba(255,243,176,0)); opacity: 0; }

/* ---------------------------------------------------------------- Bag, Market, Fellowship */
.itemrow .ic.ak-new { position: relative; overflow: visible; }
.ak-newtag { position: absolute; top: -9px; right: -9px; font: 900 10px/1 var(--body); background: #ff5d5d; color: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 2px 5px; pointer-events: none; }
.ak-moment { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20,10,35,.72); cursor: pointer; }
.ak-moment .ak-mcard { position: relative; width: 100%; max-width: 340px; background: var(--cream); color: var(--ink); border: 3px solid #000; border-radius: 22px; box-shadow: 0 7px 0 #000; padding: 16px; text-align: center; overflow: hidden; isolation: isolate; }
.ak-moment .ak-mcard > * { position: relative; z-index: 1; }
.ak-moment .ak-mbehind { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; }
.ak-medalbox { perspective: 600px; height: 150px; display: grid; place-items: center; }
.ak-medal { position: relative; width: 112px; height: 112px; }
.ak-medal svg { width: 100%; height: 100%; display: block; }
.ak-medal .ak-shine { border-radius: 50%; }
.ak-moment .ak-mtap { margin-top: 10px; font: 400 14px/1 var(--head); color: var(--muted); }

/* ---------------------------------------------------------------- the finale */
.finale.ak-finale { background: #0f0b24; }
.ak-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ak-sky .ak-night { position: absolute; inset: 0; background: linear-gradient(#0f0b24, #2a1b45 55%, #4a2f6e); }
.ak-sky .ak-dawn { position: absolute; inset: 0; background: linear-gradient(#5aa9e6 0%, #ffc8a2 40%, #ffd6a5 52%, #fff1c9 58%); opacity: 0; }
.ak-sky .ak-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; }
.ak-sky .ak-sun { position: absolute; left: 50%; top: 57%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: #ffd23f; border: 4px solid var(--ink); box-shadow: 0 0 0 16px rgba(255,226,120,.45), 0 0 0 40px rgba(255,226,120,.18); }
.ak-sky .ak-sunrays { position: absolute; left: 50%; top: calc(57% - 70px); width: 900px; height: 900px; margin: -450px 0 0 -450px; opacity: 0; }
.ak-sky .ak-land { position: absolute; left: 0; right: 0; bottom: 0; top: 57%; }
.ak-sky .ak-land svg { position: absolute; left: 50%; bottom: 0; width: max(100%, 480px); height: 100%; transform: translateX(-50%); display: block; }
.ak-sky .ak-crowd { position: absolute; left: 50%; bottom: 0; width: 390px; top: 57%; margin-left: -195px; }
.ak-sky .ak-walker { position: absolute; }
.ak-sky .ak-walker img { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.finale.ak-finale > .scroll { position: relative; z-index: 1; }
.finale.ak-finale .ak-ftitle { text-align: center; }
.finale.ak-finale .ak-ftitle .h { font-size: 36px; line-height: 1.02; }
.finale.ak-finale .ak-fsub { font: 800 14px/1.35 var(--body); color: #fff; text-shadow: 0 2px 0 #000a; margin-top: 6px; }
.finale.ak-finale .ak-hebrews { margin-top: 12px; }
.finale.ak-finale .ak-hebrews .quote span { display: inline; }
.finale.ak-finale .ak-roadon { margin-top: 10px; }
.finale.ak-finale .ak-roadon li { display: flex; gap: 8px; align-items: flex-start; font: 800 13px/1.35 var(--body); margin-top: 6px; }
.finale.ak-finale .ak-roadon li svg { width: 20px; height: 20px; flex: none; }
.finale.ak-finale .ak-roadon ul { list-style: none; margin: 4px 0 0; padding: 0; }
.finale.ak-finale .ak-spacer { height: max(150px, calc(100dvh - 410px)); }
.finale.ak-finale .ak-fbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 calc(22px + var(--safe-bottom)); }
/* "Scroll for more": the rest of the finale (the stats, the roster, Keep walking) starts just under the fold. */
.finale.ak-finale .ak-fmore { position: absolute; left: 0; right: 0; bottom: calc(10px + var(--safe-bottom)); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; font: 900 12px/1 var(--body); color: #fff; text-shadow: 0 2px 0 #000a, 0 0 8px #0006; animation: akfmore 1.4s ease-in-out infinite alternate; }
.finale.ak-finale .ak-fmore i { width: 11px; height: 11px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); filter: drop-shadow(0 2px 0 #000a); }
@keyframes akfmore { from { transform: translateY(0); } to { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .finale.ak-finale .ak-fmore { animation: none; } }