/* Animations outside battle, group A: the Journey's crowd and living world, the World Map, the stage sheet's picture,
   the party screen, the tabs and the events (public/js/anim/). Only transform and opacity move. */

/* ---------------------------------------------------------------- shared bits (anim/road-kit.js) */
.rk-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.rk-sp { position: absolute; width: 0; height: 0; pointer-events: none; }
.rk-sp > * { position: absolute; left: 0; top: 0; translate: -50% -50%; }
.rk-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 90; }
.rk-toast { width: max-content; background: var(--gold); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); padding: 5px 10px; font: 400 15px/1.05 var(--head); color: var(--ink); white-space: nowrap; text-align: center; }
.rk-toast small { display: block; font: 900 10.5px/1.15 var(--body); color: #6a4a00; }
.rk-toast.white { background: #fff; } .rk-toast.white small { color: var(--muted); }
.rk-toast.no { background: #ffd6d6; } .rk-toast.no small { color: #8a1c1c; }
.rk-pop { width: max-content; font: 400 28px/1 var(--head); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; white-space: nowrap; text-align: center; }
.rk-pop.gold { color: var(--gold); } .rk-pop.green { color: #7ae582; } .rk-pop.red { color: #ff5d5d; -webkit-text-stroke-width: 7px; }
.rk-pop small { display: block; text-align: center; font: 400 15px/1.2 var(--head); color: #fff3b0; -webkit-text-stroke: 3px var(--ink); margin-top: 2px; }
.rk-ribbon { position: relative; width: max-content; background: var(--rb, #e63946); color: #fff; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); padding: 8px 24px 9px; text-align: center; white-space: nowrap; max-width: 86vw; }
.rk-ribbon::before, .rk-ribbon::after { content: ""; position: absolute; top: 12px; width: 30px; height: 100%; background: #b5172a; border: 3px solid var(--ink); z-index: -1; }
.rk-ribbon::before { left: -24px; clip-path: polygon(0 0,100% 0,100% 100%,0 100%,30% 50%); }
.rk-ribbon::after { right: -24px; clip-path: polygon(0 0,100% 0,70% 50%,100% 100%,0 100%); }
.rk-ribbon small { display: block; font: 900 11px/1.1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: #ffe28a; }
.rk-ribbon b { display: block; font: 400 23px/1.05 var(--head); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- the crowd on the road (anim/walk.js) */
.map.world.rk-crowd .wyou { display: none; }
.rk-party { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.rk-labels { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.rk-partytop { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.rk-mapfx { position: absolute; inset: 0; pointer-events: none; z-index: 8; overflow: visible; }
.map.world.rk-crowd > .node .lab { visibility: hidden; }
.rk-labels .node { pointer-events: none; }
.rk-labels .node .disc, .rk-labels .node .nodestars { visibility: hidden; animation: none; }
.rk-walker { position: absolute; left: 0; top: 0; width: 40px; height: 72px; will-change: transform; }
.rk-walker .w { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 100%; }
.rk-walker svg, .rk-walker img { width: 100%; height: 100%; overflow: visible; display: block; }
.rk-walker img { -webkit-user-drag: none; user-select: none; }
.rk-walker .sh { position: absolute; left: 4px; right: 4px; bottom: -3px; height: 8px; border-radius: 50%; background: rgba(29,20,32,.22); }
.rk-walker.follower { width: 30px; height: 54px; }
.rk-walker.far .sh { display: none; }
.rk-walker .lead { position: absolute; left: 50%; top: -20px; translate: -50% 0; background: var(--ink); color: #fff; font: 400 11px/1 var(--head); padding: 3px 6px; border-radius: 99px; white-space: nowrap; border: 2px solid #fff; }
.rk-walker .lead::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -4px; border: 4px solid transparent; border-top-color: #fff; }
.map.world .node.here.cleared .disc { box-shadow: 0 4px 0 var(--ink), 0 0 0 5px #fff, 0 0 0 8px var(--gold); }
.map.world .node.here.cleared .lab { background: var(--gold); }
.rk-dust { position: absolute; left: 0; top: 0; width: 30px; height: 22px; pointer-events: none; will-change: transform, opacity; }
.rk-dust svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---------------------------------------------------------------- a living world (anim/journey.js) */
.rk-flock { position: absolute; left: 0; top: 16px; z-index: 4; pointer-events: none; }
.rk-cloudshadow { position: absolute; left: 0; width: 220px; height: 90px; border-radius: 50%; background: radial-gradient(closest-side, rgba(29,20,32,.10), rgba(29,20,32,0)); z-index: 2; pointer-events: none; }
.rk-glint { transform-box: fill-box; transform-origin: center; pointer-events: none; }
.rk-bossaura { position: absolute; inset: -35%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,70,70,.55), rgba(255,70,70,0)); z-index: -1; pointer-events: none; }

/* a world is complete */
.rk-celebrate { position: absolute; inset: 0; z-index: 150; overflow: hidden; cursor: pointer; }
.rk-celebrate .rk-dim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 36%, rgba(42,27,69,.45), rgba(18,11,31,.82)); }
.rk-celebrate .rk-fxl { position: absolute; inset: 0; pointer-events: none; }
.rk-medal { border-radius: 50%; background: #fff; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); overflow: hidden; }
.rk-medal svg { width: 100%; height: 100%; display: block; }
.rk-skiphint { position: absolute; left: 0; right: 0; bottom: calc(26px + var(--safe-bottom)); text-align: center; font: 400 17px/1 var(--head); color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; opacity: 0; }

/* ---------------------------------------------------------------- the stage sheet's picture (anim/sheet.js) */
.rk-sheetart { position: relative; height: clamp(112px, 19vh, 168px); margin: -16px -16px 12px; overflow: hidden; border-bottom: 3px solid var(--ink); border-radius: 21px 21px 0 0; background: #bdf1ff; }
.rk-sheetart .l { position: absolute; left: 0; right: 0; }
.rk-sheetart [data-l="sky"] { top: -34%; height: 175%; }
.rk-sheetart [data-l="sky"] svg { display: block; }
.rk-sheetart [data-l="hills"] { bottom: 0; height: 52%; }
.rk-sheetart [data-l="foe"] { left: 50%; right: auto; bottom: 14px; width: 42%; max-width: 150px; height: 82%; translate: -50% 0; transform-origin: 50% 100%; }
.rk-sheetart:not(.boss) [data-l="foe"] { height: 64%; }
.rk-sheetart [data-l="foe"] svg { width: 100%; height: 100%; overflow: visible; display: block; }
.rk-sheetart [data-l="front"] { left: -6px; right: -6px; bottom: -2px; height: 22%; }
.rk-sheetart [data-l="front"] svg, .rk-sheetart [data-l="hills"] svg { display: block; }
.rk-sheetart .tint { position: absolute; inset: 0; background: #ff2d2d; opacity: 0; mix-blend-mode: multiply; pointer-events: none; }
.rk-sheetart::after { content: ""; position: absolute; left: 50%; top: 8px; width: 52px; height: 6px; margin-left: -26px; border-radius: 4px; background: rgba(255,255,255,.85); border: 2px solid var(--ink); }


/* ---------------------------------------------------------------- the World Map (anim/mapfx.js) */
.rk-mapreveal { z-index: 5; }
.rk-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rk-flag { width: max-content; display: flex; align-items: center; gap: 4px; background: var(--ink); color: #fff; font: 400 13px/1 var(--head); padding: 3px 9px 3px 3px; border: 2px solid #fff; border-radius: 99px; white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.rk-flag i { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: #ffe28a; border: 2px solid #fff; display: block; }
.rk-flag i svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------- the party screen (anim/party.js) */
.rk-partyfx { z-index: 50; }
.rk-flycard { position: relative; margin: 0; }
.rk-bossrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rk-bossface { position: relative; width: 40px; height: 40px; flex: none; border: 2.5px solid #000; border-radius: 11px; background: #ffc9c9; overflow: hidden; }
.rk-bossface > svg:first-child { width: 100%; height: 118%; margin-top: -2px; display: block; }
.rk-bossface .rk-crack { position: absolute; inset: 0; width: 100%; height: 100%; }
.rk-strength { position: relative; flex: 1; height: 14px; border: 2.5px solid #000; border-radius: 8px; background: #4a3a66; overflow: hidden; }
.rk-strength b { position: absolute; inset: 0; transform-origin: 0 50%; background: #ff6b6b; }
.rk-strength b[data-level="mid"] { background: #ffb703; }
.rk-strength b[data-level="low"] { background: #7ae582; }
.rk-strength i { position: absolute; top: 0; bottom: 0; width: 2px; background: #000; opacity: .35; }
.rk-ctrdot { width: 22px; height: 22px; border-radius: 50%; background: #7ae582; border: 2px solid #000; display: grid; place-items: center; font: 400 14px/1 var(--head); color: var(--ink); }
.rk-stamp { width: max-content; font: 400 20px/1 var(--head); color: #2d8a3e; border: 4px solid #2d8a3e; border-radius: 10px; padding: 3px 10px; background: rgba(255,255,255,.92); white-space: nowrap; }

/* ---------------------------------------------------------------- the tabs (anim/nav.js) */
.nav { position: relative; }
.nav .navpill { position: absolute; top: 4px; bottom: calc(4px + var(--safe-bottom)); left: 4px; width: calc(100% / var(--n) - 8px); transform: translateX(calc(var(--i) * (100% + 8px))); border-radius: 14px; background: #ffe28a; border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink); pointer-events: none; z-index: 0; }
.nav button { z-index: 1; }
.nav .rk-newbadge { position: absolute; top: 1px; right: calc(50% - 30px); font: 400 10.5px/1 var(--head); background: var(--red); color: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 5px; z-index: 2; }
#app > .screen.rk-leaving { pointer-events: none; z-index: 1; }

/* ---------------------------------------------------------------- Christmas and Easter (anim/events.js) */
.rk-evscene { position: relative; overflow: hidden; padding: 164px 0 0; margin-bottom: 12px; color: var(--ink); background: #fff7e6; }
.rk-evscene .rk-evart { position: absolute; left: 0; right: 0; top: 0; height: 164px; overflow: hidden; pointer-events: none; }
.rk-evart > div { position: absolute; left: 0; right: 0; top: 0; height: 164px; pointer-events: none; }
.rk-evscene .rk-evquote { position: relative; padding: 9px 14px 10px; text-align: center; font-size: 14.5px; border-top: 3px solid var(--ink); background: #fff7e6; }
.rk-evscene .rk-evquote b { display: block; margin-top: 3px; }
.rk-evscene.xmas { background-color: #fff7e6; }
.rk-evscene.xmas::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 164px; background: linear-gradient(#5aa9e6, #a8d8f0); }
.rk-evscene .rk-night { background: linear-gradient(#10143a, #2a1f5e 60%, #3d2a78); }
.rk-evscene .rk-twinkles .rk-sp > * { opacity: .8; }
.rk-evscene .rk-starglow { left: auto !important; right: 8% !important; top: -40px !important; width: 190px; height: 190px !important; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,240,170,.8), rgba(255,240,170,0)); }
.rk-evscene .rk-bigstar { left: auto !important; right: calc(8% + 30px) !important; top: -8px !important; width: 130px; height: 130px !important; }
.rk-evscene .rk-beam { background: linear-gradient(rgba(255,244,190,.8), rgba(255,240,170,.25)); clip-path: polygon(calc(100% - 8% - 101px) 56px, calc(100% - 8% - 89px) 56px, 62% 100%, 36% 100%); }
.rk-evscene .rk-town { top: auto !important; bottom: auto; height: 70px !important; top: 94px !important; }
.rk-evscene.easter::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 164px; background: #141a3a; }
.rk-evscene .rk-predawn { background: linear-gradient(#141a3a, #3d2a63 60%, #5a3d8a); }
.rk-evscene .rk-dawn { background: linear-gradient(#8ecdf8, #ffd6a5 55%, #ffb4a2 75%, #ffe5b4); }
.rk-evscene .rk-sun { left: 38% !important; right: auto !important; top: 34px !important; width: 74px; height: 74px !important; border-radius: 50%; background: #ffd23f; border: 3.5px solid var(--ink); box-shadow: 0 0 0 10px rgba(255,226,120,.45), 0 0 0 24px rgba(255,226,120,.2); }
.rk-evscene .rk-land { top: 44px !important; height: 120px !important; }
.rk-evscene .rk-flowers { top: auto !important; height: 40px !important; top: 124px !important; }
.rk-evscene .rk-flowers i { position: absolute; transform-origin: 50% 100%; }
.rk-evscene .rk-risen { top: 8px !important; height: auto !important; left: 10px !important; right: auto !important; font: 400 26px/1 var(--head); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.rk-pillfx { position: absolute; inset: 0; pointer-events: none; }
.tpill .ti { position: relative; }
.rk-pillfx .rk-ministar { position: absolute; right: -6px; top: -6px; display: block; }
.rk-pillfx .rk-ministar.b { right: auto; left: -4px; top: auto; bottom: -2px; }
.rk-pillfx .rk-minisun { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: radial-gradient(closest-side, #ffe066, rgba(255,210,63,.5) 70%, rgba(255,210,63,0)); z-index: -1; display: block; }