/*
 * Template "Jagoan Cilik" (Khitanan): a cheerful cartoon adventure on a treasure map.
 * Colors from the variant (<x-inv.head>): --inv-primary (orange/aqua/green), --inv-accent (yellow),
 * --inv-background (sand), --inv-text (navy/brown ink, also every outline), --inv-sea, --inv-wood, --inv-paper.
 * The look: thick ink outlines, hard offset shadows ("stickers"), rounded Fredoka text, Lilita One titles.
 * Motion only under html.inv-anim (off with "reduce motion"); scroll-driven parts inside @supports.
 */

:root {
    --inv-primary: #e8611a;
    --inv-accent: #ffc93c;
    --inv-background: #fbe9b7;
    --inv-text: #2b3a67;
    --inv-sea: #8fd3c1;
    --inv-wood: #8a5222;
    --inv-paper: #fffaf0;
}

.jagoan-cilik-body {
    --jc-w: 460px;
    --jc-ink: var(--inv-text);
    --jc-line: 3px solid var(--inv-text);
    --jc-shadow: 0 6px 0 var(--inv-text);
    --jc-display: 'Lilita One', 'Fredoka', system-ui, sans-serif;
    --jc-round: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --jc-wood-light: color-mix(in srgb, var(--inv-wood) 82%, #fff);
    --jc-kraft: color-mix(in srgb, var(--inv-wood) 22%, var(--inv-paper));
    --jc-muted: color-mix(in srgb, var(--inv-text) 82%, var(--inv-paper));
    --jc-stamp: #c8321f;
    --jagoan-cilik-leaf: color-mix(in srgb, var(--inv-sea) 25%, #3f9a4b);
    --inv-ambient-1: var(--inv-accent);
    --inv-ambient-2: var(--inv-primary);
    --inv-radius: 16px;

    margin: 0;
    background: var(--inv-sea);
    color: var(--inv-text);
    font: 500 1rem/1.6 var(--jc-round);
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }

.jagoan-cilik-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.jagoan-cilik-icon { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.15em; }

/* ---------- column and backdrop ---------- */

/* the map paper: faint grid lines and dots */
.jagoan-cilik-page, .jagoan-cilik-cover {
    --jc-grid:
        linear-gradient(color-mix(in srgb, var(--inv-text) 6%, transparent) 1.5px, transparent 1.5px) 0 0 / 36px 36px,
        linear-gradient(90deg, color-mix(in srgb, var(--inv-text) 6%, transparent) 1.5px, transparent 1.5px) 0 0 / 36px 36px;
}

.jagoan-cilik-backdrop {
    position: fixed; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 9% 6% at 10% 18%, var(--inv-background) 0 58%, var(--inv-text) 59% 63%, transparent 64%),
        radial-gradient(ellipse 7% 5% at 92% 30%, var(--inv-background) 0 58%, var(--inv-text) 59% 63%, transparent 64%),
        radial-gradient(ellipse 11% 7% at 88% 82%, var(--inv-background) 0 58%, var(--inv-text) 59% 63%, transparent 64%),
        radial-gradient(ellipse 6% 4% at 7% 74%, var(--inv-background) 0 58%, var(--inv-text) 59% 63%, transparent 64%),
        radial-gradient(circle, rgb(255 255 255 / .35) 0 2px, transparent 2.5px) 0 0 / 30px 30px,
        var(--inv-sea);
}

.jagoan-cilik-page {
    position: relative; z-index: 1;
    width: min(100%, var(--jc-w)); min-height: 100vh; margin: 0 auto;
    overflow-x: clip;
    background: var(--jc-grid), var(--inv-background);
}

@media (min-width: 520px) {
    .jagoan-cilik-page { box-shadow: 0 0 0 4px var(--inv-text), 0 30px 80px rgb(0 0 0 / .3); }
}
@media (max-width: 519px) {
    .jagoan-cilik-backdrop { display: none; }
}

.jagoan-cilik-preview {
    position: fixed; z-index: 60; top: 0; left: 0; right: 0; padding: .45rem 1rem;
    background: var(--inv-accent); color: var(--inv-text); text-align: center;
    font: 600 .8rem/1.4 var(--jc-round); border-bottom: var(--jc-line);
}

/* ---------- shared bits: buttons, arabic ---------- */

.jagoan-cilik-body .inv-button {
    min-height: 2.9rem; padding: .65rem 1.2rem; gap: .45rem;
    border: var(--jc-line); border-radius: .85rem;
    background: var(--inv-accent); color: var(--inv-text);
    font: 600 1rem/1.15 var(--jc-round);
    box-shadow: 0 5px 0 var(--inv-text);
    transition: translate .12s ease, box-shadow .12s ease, filter .2s ease;
}
.jagoan-cilik-body .inv-button--outline { background: var(--inv-paper); color: var(--inv-text); box-shadow: 0 5px 0 var(--inv-text); }
.jagoan-cilik-body .inv-button:focus-visible { outline: 3px solid var(--inv-primary); outline-offset: 3px; }
html .jagoan-cilik-body .inv-button:active, html.inv-anim .jagoan-cilik-body .inv-button:active { transform: none; translate: 0 4px; box-shadow: 0 1px 0 var(--inv-text); }
.jagoan-cilik-btn--small { min-height: 2.75rem; padding: .5rem .9rem; font-size: .92rem; }

.jagoan-cilik-arabic { font: 400 1.6rem/2.1 'Amiri', serif; color: var(--inv-text); }

/* ---------- cover ---------- */

.jagoan-cilik-cover {
    position: fixed; inset: 0; z-index: 30;
    width: min(100%, var(--jc-w)); margin: 0 auto;
    display: flex; overflow-x: hidden; overflow-y: auto;
    color: var(--inv-text);
    background:
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--inv-paper) 70%, transparent) 0 30%, transparent 62%),
        var(--jc-grid),
        var(--inv-background);
}
@media (min-width: 520px) {
    .jagoan-cilik-cover { box-shadow: 0 0 0 4px var(--inv-text); }
}

.jagoan-cilik-cover__map { position: absolute; inset: 0; pointer-events: none; }
.jagoan-cilik-cover__route { position: absolute; inset: 0; width: 100%; height: 100%; }
.jagoan-cilik-cover__island { position: absolute; border: 3px dashed color-mix(in srgb, var(--inv-text) 35%, transparent); background: color-mix(in srgb, var(--inv-sea) 75%, transparent); }
.jagoan-cilik-cover__island--a { left: -18%; top: 30%; width: 34%; aspect-ratio: 1; border-radius: 46% 54% 50% 50% / 52% 44% 56% 48%; }
.jagoan-cilik-cover__island--b { right: -16%; bottom: 22%; width: 38%; aspect-ratio: 1.1; border-radius: 52% 48% 44% 56% / 46% 54% 46% 54%; }
.jagoan-cilik-cover__x { position: absolute; left: 4%; top: 52%; width: 1.6rem; height: 1.6rem; }
.jagoan-cilik-cover__x::before, .jagoan-cilik-cover__x::after,
.jagoan-cilik-hero__x::before, .jagoan-cilik-hero__x::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: .32rem; margin: -.16rem 0 0 -50%;
    border-radius: 999px; background: var(--jc-stamp); transform: rotate(45deg);
}
.jagoan-cilik-cover__x::after, .jagoan-cilik-hero__x::after { transform: rotate(-45deg); }

.jagoan-cilik-cover__cloud { position: absolute; z-index: 1; width: min(30vw, 7.4rem, 15svh); aspect-ratio: 120 / 64; pointer-events: none; }
.jagoan-cilik-cover__cloud--a { left: -1.6rem; top: .9rem; }
.jagoan-cilik-cover__cloud--b { right: -2.2rem; top: 46%; width: min(24vw, 6rem, 12svh); opacity: .9; }
.jagoan-cilik-cover__compass { position: absolute; z-index: 1; right: .8rem; top: .9rem; width: min(17vw, 4.2rem, 10svh); aspect-ratio: 1; }
.jagoan-cilik-cover__palm { position: absolute; z-index: 1; bottom: -.4rem; width: min(19vw, 5.2rem, 12svh); aspect-ratio: 90 / 120; pointer-events: none; }
.jagoan-cilik-cover__palm--l { left: -.9rem; }
.jagoan-cilik-cover__palm--r { right: -.9rem; transform: scaleX(-1); }

.jagoan-cilik-cover__inner {
    position: relative; z-index: 2;
    width: 100%; min-height: 100%; margin: auto; padding: 3.4rem 1.4rem 2.6rem;
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: .7rem;
    text-align: center;
}

.jagoan-cilik-cover__kicker {
    display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .95rem;
    border: 2.5px solid var(--inv-text); border-radius: 999px; background: var(--inv-paper);
    box-shadow: 0 3px 0 var(--inv-text); rotate: -2deg;
    font: 600 .82rem/1.3 var(--jc-round); letter-spacing: .1em; text-transform: uppercase;
}
.jagoan-cilik-cover__kicker .jagoan-cilik-icon { color: var(--inv-primary); }

/* the badge */
.jagoan-cilik-badge { position: relative; width: min(64vw, 15rem); aspect-ratio: 1; margin-bottom: 1.4rem; }
.jagoan-cilik-badge--cover { width: min(62vw, 15.5rem, 33svh); }
.jagoan-cilik-badge__burst { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jagoan-cilik-badge__disc {
    position: absolute; inset: 17%; display: grid; place-items: center; overflow: hidden;
    border-radius: 50%; border: .4rem solid #fff; box-shadow: 0 0 0 3px var(--inv-text);
    background: radial-gradient(circle at 50% 40%, var(--inv-paper), color-mix(in srgb, var(--inv-sea) 70%, var(--inv-paper)));
}
.jagoan-cilik-badge__disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.jagoan-cilik-badge__emblem { width: 76%; height: 76%; }
.jagoan-cilik-badge__twinkle { position: absolute; width: 13%; aspect-ratio: 1; }
.jagoan-cilik-badge__twinkle--a { right: -4%; top: 2%; }
.jagoan-cilik-badge__twinkle--b { left: -6%; top: 40%; width: 9%; }
.jagoan-cilik-badge__ribbon {
    position: absolute; left: -9%; right: -9%; bottom: -1%; z-index: 2;
    display: grid; place-items: center; padding: .35rem .9rem .3rem; min-height: 2.9rem;
    border: var(--jc-line); border-radius: .4rem; background: var(--inv-accent); color: var(--inv-text);
    box-shadow: 0 5px 0 var(--inv-text);
    font: 400 clamp(1.55rem, 7.6vw, 2rem)/1.05 var(--jc-display); letter-spacing: .02em; overflow-wrap: anywhere;
}
/* the folded ribbon tails behind both ends */
.jagoan-cilik-badge__ribbon::before, .jagoan-cilik-badge__ribbon::after {
    content: ''; position: absolute; z-index: -1; top: .55rem; width: 1.7rem; height: 100%;
    background: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-wood)); border: var(--jc-line);
}
.jagoan-cilik-badge__ribbon::before { left: -1.25rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.jagoan-cilik-badge__ribbon::after { right: -1.25rem; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.jagoan-cilik-badge--names-2 .jagoan-cilik-badge__ribbon { font-size: clamp(1.25rem, 6vw, 1.55rem); }
.jagoan-cilik-badge--names-3 .jagoan-cilik-badge__ribbon { font-size: clamp(1.05rem, 5vw, 1.3rem); }

.jagoan-cilik-cover__date {
    display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem;
    border: 2.5px solid var(--inv-text); border-radius: .7rem; background: var(--inv-paper);
    box-shadow: 0 4px 0 var(--inv-text); rotate: 1.5deg;
    font: 600 1rem/1.3 var(--jc-round);
}
.jagoan-cilik-cover__date .jagoan-cilik-icon { color: var(--inv-primary); }
.jagoan-cilik-cover__quote { max-width: 20rem; font: 500 .95rem/1.45 var(--jc-round); color: var(--jc-muted); }

/* the guest on a luggage tag */
.jagoan-cilik-cover__guest {
    position: relative; width: min(100%, 17.5rem); padding: .55rem 1rem .6rem 2.6rem;
    border: var(--jc-line); border-radius: .5rem 1.2rem 1.2rem .5rem; background: var(--inv-paper);
    box-shadow: 0 5px 0 var(--inv-text); rotate: -1.5deg; text-align: center;
}
.jagoan-cilik-cover__guest-hole {
    position: absolute; left: .7rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem;
    border: 2.5px solid var(--inv-text); border-radius: 50%; background: var(--inv-background);
}
.jagoan-cilik-cover__guest-hole::before {
    content: ''; position: absolute; right: 100%; top: 50%; width: 1.4rem; height: 2.5px; background: var(--inv-text);
    transform: rotate(-24deg); transform-origin: 100% 50%;
}
.jagoan-cilik-cover__guest-label { font: 600 .72rem/1.3 var(--jc-round); letter-spacing: .16em; text-transform: uppercase; }
.jagoan-cilik-cover__guest-name { margin-top: .1rem; font: 700 1.15rem/1.3 var(--jc-round); overflow-wrap: anywhere; }

/* the wooden sign (open button) with a real 3D press */
.jagoan-cilik-body .jagoan-cilik-sign {
    position: relative; min-height: 3.3rem; margin-top: .3rem; padding: .75rem 2.1rem; gap: .55rem;
    border: var(--jc-line); border-radius: .6rem;
    background:
        repeating-linear-gradient(176deg, transparent 0 7px, rgb(0 0 0 / .07) 7px 9px),
        linear-gradient(180deg, var(--jc-wood-light), var(--inv-wood));
    color: #fff8e6; text-shadow: 0 2px 0 rgb(0 0 0 / .3);
    font: 600 1.12rem/1.1 var(--jc-round); letter-spacing: .01em;
    box-shadow: 0 6px 0 var(--inv-text), inset 0 2px 0 rgb(255 255 255 / .25);
}
.jagoan-cilik-sign::before, .jagoan-cilik-sign::after {
    content: ''; position: absolute; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-radius: 50%;
    background: color-mix(in srgb, var(--inv-text) 70%, #888); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5);
}
.jagoan-cilik-sign::before { left: .7rem; }
.jagoan-cilik-sign::after { right: .7rem; }
.jagoan-cilik-sign .jagoan-cilik-icon { width: 1.25rem; height: 1.25rem; }
html .jagoan-cilik-body .jagoan-cilik-sign:active { translate: 0 5px; box-shadow: 0 1px 0 var(--inv-text), inset 0 2px 0 rgb(255 255 255 / .25); }
.jagoan-cilik-body .jagoan-cilik-sign:focus-visible { outline: 3px solid var(--inv-text); outline-offset: 4px; }

/* the cover's entrance: the badge spins in and sticks with a bounce, the rest pops in after it */
@keyframes jagoan-cilik-badge-in {
    0% { opacity: 0; transform: rotate(-420deg) scale(.15); }
    55% { opacity: 1; transform: rotate(14deg) scale(1.12); }
    72% { transform: rotate(-6deg) scale(.93); }
    86% { transform: rotate(3deg) scale(1.03); }
    100% { transform: none; }
}
@keyframes jagoan-cilik-pop-in {
    0% { opacity: 0; transform: scale(.6) translateY(10px); }
    65% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: none; }
}
@keyframes jagoan-cilik-ribbon-in {
    0% { opacity: 0; transform: scaleX(.2) translateY(-14px); }
    60% { opacity: 1; transform: scaleX(1.08); }
    100% { opacity: 1; transform: none; }
}
@keyframes jagoan-cilik-wiggle {
    0%, 82%, 100% { transform: none; }
    86% { transform: rotate(-3deg); }
    90% { transform: rotate(3deg); }
    94% { transform: rotate(-1.5deg); }
}
@keyframes jagoan-cilik-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes jagoan-cilik-drift { 0%, 100% { translate: 0 0; } 50% { translate: 14px 0; } }
@keyframes jagoan-cilik-sway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes jagoan-cilik-spin-wobble { 0%, 100% { rotate: -14deg; } 50% { rotate: 16deg; } }
@keyframes jagoan-cilik-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.7) rotate(25deg); } }

html.inv-anim .jagoan-cilik-badge--cover { animation: jagoan-cilik-badge-in 1s cubic-bezier(.3, .7, .3, 1) .1s both; }
html.inv-anim .jagoan-cilik-badge--cover .jagoan-cilik-badge__ribbon { animation: jagoan-cilik-ribbon-in .5s cubic-bezier(.3, 1.4, .5, 1) .75s both; }
html.inv-anim .jagoan-cilik-badge__twinkle { animation: jagoan-cilik-twinkle 2.6s ease-in-out infinite; }
html.inv-anim .jagoan-cilik-badge__twinkle--b { animation-delay: -1.3s; }
html.inv-anim .jagoan-cilik-cover__kicker { animation: jagoan-cilik-pop-in .5s cubic-bezier(.3, 1.4, .5, 1) .05s both; }
html.inv-anim .jagoan-cilik-cover__date { animation: jagoan-cilik-pop-in .5s cubic-bezier(.3, 1.4, .5, 1) .5s both; }
html.inv-anim .jagoan-cilik-cover__quote { animation: jagoan-cilik-pop-in .5s ease-out .6s both; }
html.inv-anim .jagoan-cilik-cover__guest { animation: jagoan-cilik-pop-in .5s cubic-bezier(.3, 1.4, .5, 1) .7s both; }
html.inv-anim .jagoan-cilik-body .jagoan-cilik-sign { animation: jagoan-cilik-pop-in .5s cubic-bezier(.3, 1.4, .5, 1) .8s both, jagoan-cilik-wiggle 3.4s ease-in-out 2s infinite; }
html.inv-anim .jagoan-cilik-cover__cloud--a { animation: jagoan-cilik-drift 7s ease-in-out infinite; }
html.inv-anim .jagoan-cilik-cover__cloud--b { animation: jagoan-cilik-drift 9s ease-in-out -3s infinite reverse; }
html.inv-anim .jagoan-cilik-cover__compass { animation: jagoan-cilik-spin-wobble 5s ease-in-out infinite; }
html.inv-anim .jagoan-cilik-cover__palm--l { transform-origin: 50% 100%; animation: jagoan-cilik-sway 4s ease-in-out infinite; }
html.inv-anim .jagoan-cilik-cover__palm--r { transform-origin: 50% 100%; animation: jagoan-cilik-sway 4.6s ease-in-out -1.5s infinite; }

/* opening: the badge jumps off the map, the cover fades */
@keyframes jagoan-cilik-badge-out {
    0% { transform: none; }
    30% { transform: scale(1.12) rotate(-8deg); }
    100% { transform: translateY(-60svh) rotate(40deg) scale(.4); opacity: 0; }
}
html.inv-anim .jagoan-cilik-cover.is-leaving .jagoan-cilik-badge--cover { animation: jagoan-cilik-badge-out .6s cubic-bezier(.5, 0, .75, .4) both; }
.jagoan-cilik-cover--leave { transition: opacity .4s ease .3s, transform .7s ease; }
.jagoan-cilik-cover--gone { opacity: 0; transform: scale(1.05); }

/* ---------- hero: the map that unfolds ---------- */

.jagoan-cilik-hero { position: relative; padding: 4.2rem 1.2rem .6rem; text-align: center; }
.jagoan-cilik-hero__cloud { position: absolute; width: 6.5rem; aspect-ratio: 120 / 64; pointer-events: none; }
.jagoan-cilik-hero__cloud--a { left: -1.4rem; top: .8rem; }
.jagoan-cilik-hero__cloud--b { right: -1.6rem; top: 1.6rem; width: 5rem; }
html.inv-anim .jagoan-cilik-hero__cloud--a { animation: jagoan-cilik-drift 8s ease-in-out infinite; }
html.inv-anim .jagoan-cilik-hero__cloud--b { animation: jagoan-cilik-drift 10s ease-in-out -4s infinite reverse; }

.jagoan-cilik-hero__map {
    position: relative; padding: 2.3rem 1.2rem 2.6rem; overflow: hidden;
    border: var(--jc-line); border-radius: 1rem; box-shadow: var(--jc-shadow);
    background-image:
        radial-gradient(ellipse 30% 22% at 0% 100%, color-mix(in srgb, var(--inv-sea) 80%, transparent) 0 98%, transparent 100%),
        radial-gradient(ellipse 22% 18% at 100% 0%, color-mix(in srgb, var(--inv-sea) 80%, transparent) 0 98%, transparent 100%),
        linear-gradient(color-mix(in srgb, var(--inv-text) 6%, transparent) 1.5px, transparent 1.5px),
        linear-gradient(90deg, color-mix(in srgb, var(--inv-text) 6%, transparent) 1.5px, transparent 1.5px);
    background-size: auto, auto, 30px 30px, 30px 30px;
    background-color: var(--inv-paper);
}
/* fold creases: the map was folded in three */
.jagoan-cilik-hero__crease { position: absolute; top: 0; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(0 0 0 / .07) 45%, rgb(255 255 255 / .5) 55%, transparent); }
.jagoan-cilik-hero__crease--a { left: calc(33.3% - 7px); }
.jagoan-cilik-hero__crease--b { left: calc(66.6% - 7px); }
.jagoan-cilik-hero__route { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 45%; pointer-events: none; }
.jagoan-cilik-hero__x { position: absolute; right: 8%; bottom: 52%; width: 1.3rem; height: 1.3rem; }
.jagoan-cilik-hero__compass { position: absolute; left: .7rem; bottom: .7rem; width: 2.6rem; height: 2.6rem; }
.jagoan-cilik-hero__content { position: relative; display: grid; gap: .35rem; justify-items: center; }
.jagoan-cilik-hero__kicker { font: 600 .74rem/1.3 var(--jc-round); letter-spacing: .18em; text-transform: uppercase; }
.jagoan-cilik-hero__title {
    padding: .2rem .8rem; border-radius: .5rem; background: var(--inv-accent); border: 2.5px solid var(--inv-text);
    font: 600 .95rem/1.3 var(--jc-round); rotate: -2deg;
}
.jagoan-cilik-hero__names {
    margin-top: .4rem; font: 400 clamp(2.4rem, 12vw, 3.1rem)/1.02 var(--jc-display); letter-spacing: .01em;
    text-shadow: 2px 4px 0 var(--inv-primary); overflow-wrap: anywhere;
}
.jagoan-cilik-hero__date { margin-top: .3rem; font: 600 1rem/1.4 var(--jc-round); }
.jagoan-cilik-hero__cue { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.3rem; font: 600 .85rem/1 var(--jc-round); }
.jagoan-cilik-hero__cue .jagoan-cilik-icon { rotate: 90deg; color: var(--inv-primary); }
html.inv-anim .jagoan-cilik-hero__cue .jagoan-cilik-icon { animation: jagoan-cilik-bob 1.6s ease-in-out infinite; }

@keyframes jagoan-cilik-unfold {
    0% { opacity: 0; transform: scaleX(.06) scaleY(.75); }
    22% { opacity: 1; transform: scaleX(.06) scaleY(1); }
    68% { transform: scaleX(1.05); }
    84% { transform: scaleX(.98); }
    100% { opacity: 1; transform: none; }
}
@keyframes jagoan-cilik-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.inv-anim .jagoan-cilik-hero:not(.is-open) .jagoan-cilik-hero__map { opacity: 0; }
html.inv-anim .jagoan-cilik-hero.is-open .jagoan-cilik-hero__map { animation: jagoan-cilik-unfold .9s cubic-bezier(.3, .8, .3, 1) .15s both; }
html.inv-anim .jagoan-cilik-hero.is-open .jagoan-cilik-hero__content { animation: jagoan-cilik-fade-up .5s ease-out .75s both; }

/* ---------- sections and headings ---------- */

.jagoan-cilik-main { padding: 0 1.15rem; }
.jagoan-cilik-section { position: relative; padding: 3.4rem 0 .6rem; text-align: center; }

.jagoan-cilik-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.6rem; }
.jagoan-cilik-head__sticker {
    display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-bottom: .55rem;
    border: var(--jc-line); border-radius: 50%; background: var(--inv-accent); color: var(--inv-text);
    box-shadow: 0 4px 0 var(--inv-text); rotate: -8deg;
}
.jagoan-cilik-head__sticker .jagoan-cilik-icon { width: 1.5rem; height: 1.5rem; }
.jagoan-cilik-head__kicker {
    display: flex; align-items: center; gap: .5rem;
    font: 600 .78rem/1.3 var(--jc-round); letter-spacing: .16em; text-transform: uppercase;
}
.jagoan-cilik-head__kicker::before, .jagoan-cilik-head__kicker::after { content: ''; width: 1.1rem; border-top: 2.5px dotted var(--inv-text); }
.jagoan-cilik-head__title {
    margin-top: .2rem; font: 400 clamp(1.95rem, 8.6vw, 2.35rem)/1.1 var(--jc-display); letter-spacing: .01em;
    text-shadow: 2px 3px 0 var(--inv-primary);
}
/* the sticker gets slapped on when its section pops in */
@keyframes jagoan-cilik-slap { 0% { scale: 1.5; } 60% { scale: .9; } 100% { scale: 1; } }
html.inv-anim .jagoan-cilik-head.is-revealed .jagoan-cilik-head__sticker { animation: jagoan-cilik-slap .5s cubic-bezier(.3, 1.4, .5, 1) .15s both; }

/* the sticker pop: a little more bounce than the shared "pop" */
html.inv-anim .jagoan-cilik-main [data-reveal="pop"] { transform: scale(.78) rotate(-2deg); transition-timing-function: ease-out, cubic-bezier(.34, 1.7, .6, 1); }
html.inv-anim .jagoan-cilik-main [data-reveal="pop"].is-revealed { transform: none; }

/* ---------- opening: the mission letter ---------- */

.jagoan-cilik-opening { padding-top: 2.6rem; }
.jagoan-cilik-opening__basmalah { margin-bottom: 1.3rem; font-size: 1.75rem; }
.jagoan-cilik-letter {
    position: relative; padding: 3rem 1.4rem 1.7rem;
    border: var(--jc-line); border-radius: 1rem; background: var(--inv-paper); box-shadow: var(--jc-shadow);
}
/* airmail stripes inside the edge */
.jagoan-cilik-letter::before {
    content: ''; position: absolute; inset: .45rem; border-radius: .6rem; padding: .35rem; pointer-events: none;
    background: repeating-linear-gradient(135deg, var(--inv-primary) 0 9px, transparent 9px 18px, var(--inv-sea) 18px 27px, transparent 27px 36px);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .75;
}
.jagoan-cilik-letter__stamp {
    position: absolute; top: -1rem; right: 1rem; display: grid; place-items: center; width: 3.1rem; height: 3.6rem;
    background: var(--inv-accent); border: 2.5px solid var(--inv-text); border-radius: .3rem; rotate: 7deg;
    box-shadow: 0 0 0 3px var(--inv-paper), 0 0 0 5px var(--inv-text);
    color: var(--inv-primary);
}
.jagoan-cilik-letter__stamp .jagoan-cilik-icon { width: 1.7rem; height: 1.7rem; stroke: var(--inv-text); stroke-width: 1px; }
.jagoan-cilik-letter__postmark {
    position: absolute; top: .95rem; left: 1.1rem; width: 3.4rem; height: 3.4rem; border-radius: 50%;
    border: 2.5px solid color-mix(in srgb, var(--inv-text) 30%, transparent);
    background: repeating-linear-gradient(0deg, transparent 0 6px, color-mix(in srgb, var(--inv-text) 18%, transparent) 6px 8px);
    -webkit-mask: radial-gradient(circle, #000 64%, transparent 66%); mask: radial-gradient(circle, #000 64%, transparent 66%);
}
.jagoan-cilik-letter__label { position: relative; font: 400 1.45rem/1.15 var(--jc-display); color: var(--inv-text); }
.jagoan-cilik-letter__greeting { position: relative; margin-top: .7rem; font: 600 1rem/1.45 var(--jc-round); }
.jagoan-cilik-letter__text { position: relative; margin-top: .7rem; font-size: 1rem; line-height: 1.65; }

/* ---------- child: hero ID cards ---------- */

.jagoan-cilik-heroes { display: grid; gap: 1.6rem; }
.jagoan-cilik-idcard {
    position: relative; padding: 1.4rem 1.2rem 1.5rem; overflow: hidden;
    border: var(--jc-line); border-radius: 1.2rem; background: var(--inv-paper); box-shadow: var(--jc-shadow);
}
.jagoan-cilik-idcard::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 6.4rem;
    background: repeating-linear-gradient(-45deg, transparent 0 12px, rgb(255 255 255 / .35) 12px 22px), var(--inv-sea);
    border-bottom: var(--jc-line);
}
.jagoan-cilik-idcard__photo {
    position: relative; display: grid; place-items: center; width: 9.5rem; height: 9.5rem; margin: 0 auto;
    border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 0 3px var(--inv-text);
    background: radial-gradient(circle at 50% 40%, var(--inv-paper), color-mix(in srgb, var(--inv-accent) 45%, var(--inv-paper)));
}
.jagoan-cilik-idcard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 25%; }
.jagoan-cilik-idcard__emblem { width: 72%; height: 72%; }
.jagoan-cilik-idcard__initial {
    position: absolute; left: -.35rem; bottom: .1rem; display: grid; place-items: center; width: 2.7rem; height: 2.7rem;
    border: var(--jc-line); border-radius: 50%; background: var(--inv-text); color: var(--inv-accent);
    font: 400 1.4rem/1 var(--jc-display);
}
.jagoan-cilik-idcard__star {
    position: absolute; right: -.4rem; top: .2rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
    border: var(--jc-line); border-radius: 50%; background: var(--inv-accent); color: var(--inv-primary); rotate: 12deg;
}
.jagoan-cilik-idcard__star .jagoan-cilik-icon { width: 1.35rem; height: 1.35rem; }
.jagoan-cilik-idcard__body { position: relative; display: grid; justify-items: center; gap: .3rem; margin-top: .9rem; }
.jagoan-cilik-idcard__tag {
    padding: .15rem .7rem; border-radius: 999px; background: var(--inv-text); color: var(--inv-accent);
    font: 600 .72rem/1.5 var(--jc-round); letter-spacing: .14em; text-transform: uppercase;
}
.jagoan-cilik-idcard__nickname { font: 400 2.5rem/1.05 var(--jc-display); text-shadow: 2px 3px 0 var(--inv-primary); overflow-wrap: anywhere; }
.jagoan-cilik-idcard__name { font: 600 1.08rem/1.35 var(--jc-round); }
.jagoan-cilik-idcard__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.jagoan-cilik-idcard__facts li {
    display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem;
    border: 2px solid var(--inv-text); border-radius: 999px; background: color-mix(in srgb, var(--inv-accent) 30%, var(--inv-paper));
    font: 600 .82rem/1.4 var(--jc-round);
}
.jagoan-cilik-idcard__facts .jagoan-cilik-icon { color: var(--inv-primary); width: 1rem; height: 1rem; }
.jagoan-cilik-chip-link {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; margin-top: .3rem; padding: .3rem .9rem;
    border: 2.5px solid var(--inv-text); border-radius: 999px; background: #fff; color: var(--inv-text);
    box-shadow: 0 3px 0 var(--inv-text); font: 600 .88rem/1 var(--jc-round); text-decoration: none;
}
.jagoan-cilik-chip-link:focus-visible { outline: 3px solid var(--inv-primary); outline-offset: 3px; }

/* two or three children: wide cards, photo on the side */
.jagoan-cilik-heroes--many .jagoan-cilik-idcard {
    display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.1rem 1rem; text-align: left;
}
.jagoan-cilik-heroes--many .jagoan-cilik-idcard::before { inset: 0 auto 0 0; width: 4.6rem; height: auto; border-bottom: 0; border-right: var(--jc-line); }
.jagoan-cilik-heroes--many .jagoan-cilik-idcard__photo { width: 6.6rem; height: 6.6rem; }
.jagoan-cilik-heroes--many .jagoan-cilik-idcard__initial { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; left: -.4rem; bottom: -.2rem; }
.jagoan-cilik-heroes--many .jagoan-cilik-idcard__star { width: 1.9rem; height: 1.9rem; right: -.5rem; top: -.2rem; }
.jagoan-cilik-heroes--many .jagoan-cilik-idcard__star .jagoan-cilik-icon { width: 1.05rem; height: 1.05rem; }
.jagoan-cilik-heroes--many .jagoan-cilik-idcard__body { justify-items: start; margin-top: 0; gap: .2rem; }
.jagoan-cilik-heroes--many .jagoan-cilik-idcard__nickname { font-size: 1.8rem; }
.jagoan-cilik-heroes--many .jagoan-cilik-idcard__name { font-size: .98rem; }
.jagoan-cilik-heroes--many .jagoan-cilik-idcard__facts { justify-content: flex-start; }
.jagoan-cilik-heroes--many .jagoan-cilik-idcard__facts li { font-size: .76rem; padding: .15rem .55rem; }
.jagoan-cilik-heroes--many .jagoan-cilik-idcard:nth-child(even) { rotate: .8deg; }
.jagoan-cilik-heroes--many .jagoan-cilik-idcard:nth-child(odd) { rotate: -.8deg; }

/* the parents: a wooden base-camp sign */
.jagoan-cilik-base {
    position: relative; margin-top: 2.6rem; padding: 2.2rem 1.2rem 1.3rem;
    border: var(--jc-line); border-radius: 1rem; box-shadow: var(--jc-shadow);
    background:
        repeating-linear-gradient(180deg, transparent 0 2.3rem, rgb(0 0 0 / .14) 2.3rem calc(2.3rem + 2px)),
        repeating-linear-gradient(176deg, transparent 0 9px, rgb(0 0 0 / .05) 9px 11px),
        linear-gradient(180deg, var(--jc-wood-light), var(--inv-wood));
    color: #fff8e6;
}
.jagoan-cilik-base__roof {
    position: absolute; left: 50%; top: -1.5rem; display: grid; place-items: center; width: 3rem; height: 3rem; margin-left: -1.5rem;
    border: var(--jc-line); border-radius: 50%; background: var(--inv-accent); color: var(--inv-text);
}
.jagoan-cilik-base__roof .jagoan-cilik-icon { width: 1.5rem; height: 1.5rem; }
.jagoan-cilik-base__label { font: 600 .78rem/1.3 var(--jc-round); letter-spacing: .16em; text-transform: uppercase; }
.jagoan-cilik-base__parents { display: grid; gap: .1rem; margin-top: .4rem; font: 400 1.35rem/1.25 var(--jc-display); letter-spacing: .01em; text-shadow: 0 2px 0 rgb(0 0 0 / .3); }
.jagoan-cilik-base__amp { font: 600 1rem/1.3 var(--jc-round); color: var(--inv-accent); }
.jagoan-cilik-base__address { display: flex; justify-content: center; gap: .4rem; margin-top: .8rem; font-size: .92rem; line-height: 1.5; }
.jagoan-cilik-base__address .jagoan-cilik-icon { margin-top: .2rem; color: var(--inv-accent); }

/* ---------- message: the speech bubble ---------- */

.jagoan-cilik-bubble { margin: 0; }
.jagoan-cilik-bubble__text {
    position: relative; margin: 0; padding: 1.9rem 1.3rem 1.5rem;
    border: var(--jc-line); border-radius: 2rem; background: #fff; box-shadow: var(--jc-shadow);
    font: 500 1.05rem/1.65 var(--jc-round);
}
.jagoan-cilik-bubble__text::before {
    content: '“'; position: absolute; left: .9rem; top: -.2rem; font: 400 3.4rem/1 var(--jc-display); color: var(--inv-primary);
}
/* the tail: an ink triangle with a white one inside */
.jagoan-cilik-bubble__text::after {
    content: ''; position: absolute; left: 2.4rem; bottom: -1.55rem; width: 2rem; height: 1.6rem;
    background: var(--inv-text); clip-path: polygon(0 0, 100% 0, 10% 100%);
}
.jagoan-cilik-bubble__text p::after {
    content: ''; position: absolute; left: calc(2.4rem + 3.5px); bottom: -1.05rem; width: 1.45rem; height: 1.15rem;
    background: #fff; clip-path: polygon(0 0, 100% 0, 10% 100%);
}
.jagoan-cilik-bubble__from { display: flex; align-items: center; gap: .6rem; margin: 1.6rem 0 0 1.4rem; font: 600 1rem/1.3 var(--jc-round); text-align: left; }
.jagoan-cilik-bubble__avatar {
    display: grid; place-items: center; width: 2.7rem; height: 2.7rem; flex: none;
    border: var(--jc-line); border-radius: 50%; background: var(--inv-accent); color: var(--inv-primary); box-shadow: 0 3px 0 var(--inv-text);
}
.jagoan-cilik-bubble__avatar .jagoan-cilik-icon { width: 1.3rem; height: 1.3rem; }

/* ---------- events: checkpoints on the route ---------- */

.jagoan-cilik-route { position: relative; padding: .2rem 0 .4rem; }
.jagoan-cilik-route__svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.jagoan-cilik-route__shadow { stroke: color-mix(in srgb, var(--inv-paper) 85%, transparent); stroke-width: 14; stroke-linecap: round; }
.jagoan-cilik-route__line { stroke: var(--inv-text); stroke-width: 3.5; stroke-dasharray: 2 11; stroke-linecap: round; }
/* no script: a plain dashed line down the middle */
.jagoan-cilik-route:not(.is-routed)::before {
    content: ''; position: absolute; left: 50%; top: 1rem; bottom: 1rem; border-left: 3.5px dashed color-mix(in srgb, var(--inv-text) 50%, transparent);
}
.jagoan-cilik-route:not(.is-routed) .jagoan-cilik-route__car { display: none; }

.jagoan-cilik-route__flag {
    position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: max-content; margin: 0 auto; font: 400 1.15rem/1 var(--jc-display);
}
.jagoan-cilik-route__flag--start { flex-direction: row-reverse; }
.jagoan-cilik-route__flag--finish { margin-top: 3.4rem; }
.jagoan-cilik-route__dot {
    width: 1.5rem; height: 1.5rem; border: var(--jc-line); border-radius: 50%; background: var(--inv-sea);
    box-shadow: 0 3px 0 var(--inv-text);
}
.jagoan-cilik-route__flag--finish .jagoan-cilik-route__dot {
    width: 1.8rem; height: 1.8rem; border-radius: .35rem;
    background: conic-gradient(var(--inv-text) 25%, #fff 0 50%, var(--inv-text) 0 75%, #fff 0) 0 0 / 50% 50%;
}

.jagoan-cilik-stop {
    --jc-gutter: 9.5%;
    position: relative; z-index: 1; width: 84%; margin-top: 3.6rem; padding: 1.9rem 1.1rem 1.25rem;
    border: var(--jc-line); border-radius: 1.2rem; background: var(--inv-paper); box-shadow: var(--jc-shadow);
    text-align: left;
}
.jagoan-cilik-stop--left { margin-right: auto; rotate: -.8deg; }
.jagoan-cilik-stop--right { margin-left: auto; rotate: .8deg; }
.jagoan-cilik-stop__pin {
    position: absolute; z-index: 3; top: -1.45rem; display: grid; place-content: center; width: 2.9rem; height: 2.9rem;
    border: var(--jc-line); border-radius: 50%; background: var(--inv-primary); color: #fff; box-shadow: 0 3px 0 var(--inv-text);
    font: 400 1.25rem/.9 var(--jc-display); text-align: center; text-shadow: 0 2px 0 var(--inv-text);
}
.jagoan-cilik-stop__pin small { display: block; font: 700 .55rem/1 var(--jc-round); letter-spacing: .08em; text-transform: uppercase; text-shadow: none; }
/* the pin sits in the empty gutter beside the card, where the route runs */
.jagoan-cilik-stop__exit { position: absolute; top: calc(100% + .4rem); width: 2.9rem; height: 0; pointer-events: none; }
.jagoan-cilik-stop--left :is(.jagoan-cilik-stop__pin, .jagoan-cilik-stop__exit) { left: calc(109.5% - 1.45rem); }
.jagoan-cilik-stop--right :is(.jagoan-cilik-stop__pin, .jagoan-cilik-stop__exit) { left: calc(-9.5% - 1.45rem); }
.jagoan-cilik-stop__photo {
    display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: .9rem; object-fit: cover;
    border: var(--jc-line); border-radius: .8rem;
}
.jagoan-cilik-stop__name { font: 400 1.6rem/1.1 var(--jc-display); letter-spacing: .01em; }
.jagoan-cilik-stop__facts { display: grid; gap: .55rem; margin: .85rem 0 0; padding: 0; list-style: none; font-size: .95rem; line-height: 1.45; }
.jagoan-cilik-stop__facts li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .55rem; align-items: start; }
.jagoan-cilik-stop__facts .jagoan-cilik-icon {
    width: 1.9rem; height: 1.9rem; padding: .3rem; border: 2px solid var(--inv-text); border-radius: 50%;
    background: var(--inv-accent); color: var(--inv-text);
}
.jagoan-cilik-stop__facts li > span { padding-top: .2rem; }
.jagoan-cilik-stop__facts strong { display: block; font-weight: 600; }
.jagoan-cilik-stop__address { display: block; color: var(--jc-muted); font-size: .9rem; }
.jagoan-cilik-stop .inv-maps { margin-top: 1.1rem; }
.jagoan-cilik-stop .inv-maps .inv-button { width: 100%; }
.jagoan-cilik-stop .inv-maps__frame { height: 200px; margin-top: 1rem; border: var(--jc-line); border-radius: .8rem; }

.jagoan-cilik-route__car {
    position: absolute; left: 0; top: 0; z-index: 2; width: 2.8rem; height: 1.75rem;
    offset-path: var(--jagoan-cilik-route); offset-rotate: auto; offset-distance: 0%;
    filter: drop-shadow(0 3px 0 rgb(0 0 0 / .18));
}

/* the car drives along with the scroll position, and the route is drawn up to it */
@keyframes jagoan-cilik-drive { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes jagoan-cilik-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@supports (animation-timeline: view()) and (offset-path: path("M0 0")) {
    .jagoan-cilik-route { view-timeline: --jagoan-cilik-route block; }
    html.inv-anim .jagoan-cilik-route.is-routed .jagoan-cilik-route__car,
    html.inv-anim .jagoan-cilik-route.is-routed .jagoan-cilik-route__reveal {
        animation-timing-function: linear; animation-fill-mode: both;
        animation-timeline: --jagoan-cilik-route;
        animation-range: contain 0% contain 100%;
        animation-range: cover 50vh cover calc(100% - 50vh);
    }
    html.inv-anim .jagoan-cilik-route.is-routed .jagoan-cilik-route__car { animation-name: jagoan-cilik-drive; }
    html.inv-anim .jagoan-cilik-route.is-routed .jagoan-cilik-route__reveal { stroke-dasharray: 1; animation-name: jagoan-cilik-draw; }
}

/* ---------- countdown: treasure coins on a plank ---------- */

.jagoan-cilik-coins {
    padding: 1.3rem .6rem 1.2rem;
    border: var(--jc-line); border-radius: 1rem; box-shadow: var(--jc-shadow);
    background:
        repeating-linear-gradient(180deg, transparent 0 2.4rem, rgb(0 0 0 / .14) 2.4rem calc(2.4rem + 2px)),
        repeating-linear-gradient(176deg, transparent 0 9px, rgb(0 0 0 / .05) 9px 11px),
        linear-gradient(180deg, var(--jc-wood-light), var(--inv-wood));
    color: #fff8e6;
}
.jagoan-cilik-coins .inv-countdown { gap: .5rem; }
.jagoan-cilik-coins .inv-countdown__item {
    display: grid; place-content: center; width: 4.4rem; min-width: 0; aspect-ratio: 1; padding: 0;
    border: var(--jc-line); border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff8d8, var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 75%, var(--inv-wood)));
    box-shadow: 0 4px 0 var(--inv-text), inset 0 0 0 4px rgb(255 255 255 / .35), inset 0 0 0 6px color-mix(in srgb, var(--inv-accent) 60%, var(--inv-wood));
    color: var(--inv-text);
}
.jagoan-cilik-coins .inv-countdown__value { font: 400 1.55rem/1 var(--jc-display); }
.jagoan-cilik-coins .inv-countdown__label { margin-top: .1rem; font: 700 .6rem/1 var(--jc-round); letter-spacing: .08em; text-transform: uppercase; opacity: 1; }
.jagoan-cilik-coins .inv-countdown__done { padding: .4rem .6rem; font-weight: 600; }
.jagoan-cilik-coins .inv-countdown__actions { gap: .7rem; margin-top: 1.3rem; padding: 0 .4rem; }
.jagoan-cilik-coins .inv-countdown__actions .inv-button { flex: 1 1 13rem; font-size: .92rem; }
@keyframes jagoan-cilik-coin { 0%, 100% { rotate: 0deg; } 50% { rotate: -8deg; } }
html.inv-anim .jagoan-cilik-coins .inv-countdown__item:nth-child(even) { animation: jagoan-cilik-coin 3s ease-in-out infinite; }
html.inv-anim .jagoan-cilik-coins .inv-countdown__item:nth-child(odd) { animation: jagoan-cilik-coin 3s ease-in-out -1.5s infinite; }

.jagoan-cilik-calendar.inv-cal {
    --inv-cal-bg: var(--inv-paper); --inv-cal-text: var(--inv-text); --inv-cal-mark: var(--inv-primary);
    margin-top: 1.8rem; border: var(--jc-line); border-radius: 1rem; box-shadow: var(--jc-shadow);
}
.jagoan-cilik-calendar .inv-cal__month { font: 400 1.6rem/1.1 var(--jc-display); }
.jagoan-cilik-calendar .inv-cal__dow { opacity: .85; }

/* ---------- prayer: the scroll ---------- */

.jagoan-cilik-scroll { position: relative; padding: 0 .3rem; }
.jagoan-cilik-scroll__rod {
    position: relative; z-index: 2; display: block; height: 1.35rem;
    border: var(--jc-line); border-radius: 999px; background: linear-gradient(180deg, var(--jc-wood-light), var(--inv-wood));
}
.jagoan-cilik-scroll__rod::before, .jagoan-cilik-scroll__rod::after {
    content: ''; position: absolute; top: 50%; width: 1.4rem; height: 1.4rem; margin-top: -.7rem;
    border: var(--jc-line); border-radius: 50%; background: var(--inv-accent);
}
.jagoan-cilik-scroll__rod::before { left: -.9rem; }
.jagoan-cilik-scroll__rod::after { right: -.9rem; }
.jagoan-cilik-scroll__paper {
    margin: -.6rem .7rem; padding: 2rem 1.2rem 1.9rem;
    border-inline: var(--jc-line);
    background:
        linear-gradient(90deg, rgb(0 0 0 / .07), transparent 9%, transparent 91%, rgb(0 0 0 / .07)),
        color-mix(in srgb, var(--inv-accent) 18%, var(--inv-paper));
}
.jagoan-cilik-scroll__label { display: inline-flex; align-items: center; gap: .4rem; font: 600 .78rem/1.3 var(--jc-round); letter-spacing: .14em; text-transform: uppercase; }
.jagoan-cilik-scroll__label .jagoan-cilik-icon { color: var(--inv-primary); }
.jagoan-cilik-scroll .jagoan-cilik-arabic { margin-top: .8rem; font-size: 1.55rem; }
.jagoan-cilik-scroll__text { margin-top: .8rem; font-size: 1rem; line-height: 1.65; }
.jagoan-cilik-scroll__source {
    display: inline-block; margin-top: 1rem; padding: .25rem .8rem; border-radius: 999px;
    background: var(--inv-text); color: var(--inv-accent); font: 600 .85rem/1.4 var(--jc-round);
}

/* ---------- rundown: the mission checklist ---------- */

.jagoan-cilik-clipboard {
    position: relative; padding: 2.3rem .8rem .9rem;
    border: var(--jc-line); border-radius: 1.1rem; box-shadow: var(--jc-shadow);
    background: repeating-linear-gradient(176deg, transparent 0 9px, rgb(0 0 0 / .05) 9px 11px), linear-gradient(180deg, var(--jc-wood-light), var(--inv-wood));
}
.jagoan-cilik-clipboard__clip {
    position: absolute; left: 50%; top: -1.1rem; width: 7rem; height: 2.4rem; margin-left: -3.5rem; z-index: 2;
    border: var(--jc-line); border-radius: .7rem .7rem .4rem .4rem;
    background: linear-gradient(180deg, #eef1f7, #b8c0d4);
}
.jagoan-cilik-clipboard__clip::before {
    content: ''; position: absolute; left: 50%; top: .45rem; width: 2rem; height: .6rem; margin-left: -1rem;
    border: 2.5px solid var(--inv-text); border-radius: 999px; background: var(--jc-wood-light);
}
.jagoan-cilik-checklist {
    margin: 0; padding: .6rem 1rem; list-style: none; text-align: left;
    border: 2.5px solid var(--inv-text); border-radius: .5rem;
    background: var(--inv-paper);
}
.jagoan-cilik-checklist__item {
    display: grid; grid-template-columns: 1.85rem 3.4rem minmax(0, 1fr); gap: .65rem; align-items: start;
    padding: .8rem 0; border-bottom: 2px dashed color-mix(in srgb, var(--inv-text) 25%, transparent);
    view-timeline: --jagoan-cilik-tick block;
}
.jagoan-cilik-checklist__item:last-child { border-bottom: 0; }
.jagoan-cilik-checklist__box {
    display: grid; place-items: center; width: 1.85rem; height: 1.85rem;
    border: var(--jc-line); border-radius: .45rem; background: #fff;
}
.jagoan-cilik-checklist__box svg { width: 1.45rem; height: 1.45rem; overflow: visible; }
.jagoan-cilik-checklist__box path { fill: none; stroke: var(--inv-primary); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.jagoan-cilik-checklist__time {
    padding: .12rem 0; border: 2px solid var(--inv-text); border-radius: .45rem; background: var(--inv-accent);
    font: 400 .98rem/1.35 var(--jc-display); text-align: center; letter-spacing: .02em;
}
.jagoan-cilik-checklist__body h3 { font: 600 1.02rem/1.35 var(--jc-round); }
.jagoan-cilik-checklist__body p { margin-top: .15rem; font-size: .9rem; line-height: 1.45; color: var(--jc-muted); }
@keyframes jagoan-cilik-tick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@supports (animation-timeline: view()) {
    html.inv-anim .jagoan-cilik-checklist__box path {
        animation: jagoan-cilik-tick linear both; animation-timeline: --jagoan-cilik-tick; animation-range: entry 70% cover 45%;
    }
}

/* ---------- story: achievement badges ---------- */

.jagoan-cilik-achievements { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.jagoan-cilik-achievement { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 1rem; align-items: start; text-align: left; }
.jagoan-cilik-achievement--b { grid-template-columns: minmax(0, 1fr) 6.2rem; }
.jagoan-cilik-achievement--b .jagoan-cilik-achievement__badge { order: 2; }
.jagoan-cilik-achievement__badge {
    position: relative; display: grid; place-items: center; width: 6.2rem; height: 6.2rem; margin-top: .4rem;
    border: var(--jc-line); border-radius: 50%; background: var(--inv-accent);
    box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--inv-text), 0 9px 0 5px var(--inv-text);
}
.jagoan-cilik-achievement--b .jagoan-cilik-achievement__badge { background: var(--inv-sea); }
.jagoan-cilik-achievement__badge img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.jagoan-cilik-achievement__icon { width: 55%; height: 55%; color: var(--inv-primary); stroke: var(--inv-text); }
.jagoan-cilik-achievement__year {
    position: absolute; left: 50%; bottom: -1.35rem; translate: -50% 0; z-index: 2; white-space: nowrap;
    padding: .1rem .55rem; border: 2.5px solid var(--inv-text); border-radius: .4rem;
    background: var(--inv-primary); color: #fff; text-shadow: 0 2px 0 var(--inv-text);
    font: 400 1rem/1.3 var(--jc-display); letter-spacing: .03em;
}
.jagoan-cilik-achievement__card {
    position: relative; padding: .95rem 1rem 1rem;
    border: var(--jc-line); border-radius: 1rem; background: var(--inv-paper); box-shadow: 0 5px 0 var(--inv-text);
}
.jagoan-cilik-achievement__unlock {
    display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--inv-sea) 70%, var(--inv-paper));
    border: 2px solid var(--inv-text); font: 600 .66rem/1.5 var(--jc-round); letter-spacing: .1em; text-transform: uppercase;
}
.jagoan-cilik-achievement__card h3 { margin-top: .4rem; font: 400 1.25rem/1.2 var(--jc-display); letter-spacing: .01em; }
.jagoan-cilik-achievement__card p:not(.jagoan-cilik-achievement__unlock) { margin-top: .35rem; font-size: .93rem; line-height: 1.55; }
@keyframes jagoan-cilik-wobble { 0% { rotate: 0deg; } 30% { rotate: -14deg; } 60% { rotate: 8deg; } 100% { rotate: 0deg; } }
html.inv-anim .jagoan-cilik-achievement.is-revealed .jagoan-cilik-achievement__badge { animation: jagoan-cilik-wobble .7s ease-out .35s both; }

/* ---------- gallery: tape-on stickers ---------- */

.jagoan-cilik-album .inv-gallery { gap: 1.3rem .9rem; padding: .6rem .2rem; }
.jagoan-cilik-album .inv-gallery__item {
    overflow: visible; border-radius: .3rem; border: 6px solid #fff; background: #fff;
    box-shadow: 0 0 0 2.5px var(--inv-text), 0 6px 0 2.5px var(--inv-text);
}
.jagoan-cilik-album .inv-gallery__item img, .jagoan-cilik-album .inv-gallery__item video { border-radius: .15rem; }
.jagoan-cilik-album .inv-gallery__item:hover img { transform: none; }
.jagoan-cilik-album .inv-gallery__item:nth-child(odd) { rotate: -2deg; }
.jagoan-cilik-album .inv-gallery__item:nth-child(even) { rotate: 2.2deg; }
.jagoan-cilik-album .inv-gallery__item::after {
    content: ''; position: absolute; left: 50%; top: -.75rem; width: 3.6rem; height: 1.25rem; margin-left: -1.8rem;
    background: color-mix(in srgb, var(--inv-accent) 70%, transparent); border: 1.5px dashed color-mix(in srgb, var(--inv-text) 35%, transparent);
    rotate: -5deg;
}
.jagoan-cilik-album .inv-gallery__item:nth-child(3n)::after { background: color-mix(in srgb, var(--inv-sea) 80%, transparent); rotate: 4deg; }
.jagoan-cilik-album .inv-gallery__item:focus-visible { outline: 3px solid var(--inv-primary); outline-offset: 5px; }

/* ---------- live streaming: the cartoon TV ---------- */

.jagoan-cilik-tv {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 2.4rem; gap: .8rem;
    width: min(100%, 20rem); margin: 2.4rem auto 1.6rem; padding: .9rem;
    border: var(--jc-line); border-radius: 1.4rem; background: var(--inv-primary); box-shadow: var(--jc-shadow);
}
.jagoan-cilik-tv__antenna { position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; }
.jagoan-cilik-tv__antenna::before, .jagoan-cilik-tv__antenna::after {
    content: ''; position: absolute; bottom: 0; width: 3px; height: 2.1rem; background: var(--inv-text); transform-origin: 50% 100%;
}
.jagoan-cilik-tv__antenna::before { transform: rotate(-30deg); }
.jagoan-cilik-tv__antenna::after { transform: rotate(30deg); }
.jagoan-cilik-tv__screen {
    display: grid; gap: .45rem; justify-items: center; padding: 1.1rem .9rem;
    border: var(--jc-line); border-radius: 1rem;
    background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / .14), transparent 60%), var(--inv-text);
    color: #fff8e6; font-size: .95rem; line-height: 1.5;
}
.jagoan-cilik-tv__live {
    display: inline-flex; align-items: center; gap: .4rem; padding: .1rem .6rem; border-radius: 999px;
    background: var(--jc-stamp); color: #fff; font: 700 .78rem/1.6 var(--jc-round); letter-spacing: .14em; text-transform: uppercase;
}
.jagoan-cilik-tv__live span { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; }
@keyframes jagoan-cilik-blink { 50% { opacity: .2; } }
html.inv-anim .jagoan-cilik-tv__live span { animation: jagoan-cilik-blink 1.2s steps(2) infinite; }
.jagoan-cilik-tv__note { color: var(--inv-accent); font-weight: 600; }
.jagoan-cilik-tv__knobs { display: grid; align-content: center; gap: .7rem; }
.jagoan-cilik-tv__knobs span { width: 2.2rem; height: 2.2rem; border: var(--jc-line); border-radius: 50%; background: var(--inv-accent); }
.jagoan-cilik-tv__knobs span + span { background: var(--inv-sea); }

/* ---------- forms (RSVP passport, wishes board) ---------- */

.jagoan-cilik-passport .inv-form, .jagoan-cilik-board .inv-form { gap: .95rem; }
.jagoan-cilik-passport .inv-form label, .jagoan-cilik-board .inv-form label,
.jagoan-cilik-passport .inv-form__choices legend {
    gap: .35rem; font: 600 .78rem/1.3 var(--jc-round); letter-spacing: .1em; text-transform: uppercase; color: var(--inv-text);
}
.jagoan-cilik-passport .inv-form input:not([type=radio]):not([type=checkbox]),
.jagoan-cilik-passport .inv-form select,
.jagoan-cilik-board .inv-form input:not([type=radio]):not([type=checkbox]),
.jagoan-cilik-board .inv-form textarea {
    min-height: 2.95rem; padding: .7rem .85rem;
    border: 2.5px dashed color-mix(in srgb, var(--inv-text) 55%, transparent); border-radius: .75rem;
    background: color-mix(in srgb, var(--inv-sea) 16%, #fff); color: var(--inv-text);
    font: 500 1rem/1.4 var(--jc-round); letter-spacing: 0; text-transform: none;
}
.jagoan-cilik-passport .inv-form select {
    appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
    background:
        linear-gradient(45deg, transparent 50%, var(--inv-text) 50%) calc(100% - 1.15rem) 52% / .45rem .45rem no-repeat,
        linear-gradient(-45deg, transparent 50%, var(--inv-text) 50%) calc(100% - .8rem) 52% / .45rem .45rem no-repeat,
        color-mix(in srgb, var(--inv-sea) 16%, #fff);
}
.jagoan-cilik-passport .inv-form :is(input, select):focus-visible,
.jagoan-cilik-board .inv-form :is(input, textarea):focus-visible {
    outline: 3px solid var(--inv-primary); outline-offset: 2px; border-style: solid; border-color: var(--inv-text);
}

/* attendance: chunky 3D toggle buttons (the radio dots are hidden but stay focusable) */
.jagoan-cilik-passport .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.jagoan-cilik-passport .inv-form__choices legend { grid-column: 1 / -1; float: left; width: 100%; margin-bottom: .45rem; padding: 0; }
.jagoan-cilik-passport .inv-form__choices label {
    position: relative; display: grid; place-items: center; min-height: 3.3rem; padding: .45rem .3rem;
    border: var(--jc-line); border-radius: .85rem; background: #fff; box-shadow: 0 5px 0 var(--inv-text);
    font: 600 .92rem/1.2 var(--jc-round); letter-spacing: 0; text-transform: none; text-align: center; cursor: pointer;
    transition: translate .12s ease, box-shadow .12s ease, background-color .2s ease;
}
.jagoan-cilik-passport .inv-form__choices input[type=radio] {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.jagoan-cilik-passport .inv-form__choices label:has(input:checked) {
    translate: 0 3px; box-shadow: 0 2px 0 var(--inv-text);
    background: var(--inv-accent);
}
.jagoan-cilik-passport .inv-form__choices label:has(input:checked)::before {
    content: ''; position: absolute; top: -.55rem; right: -.4rem; width: 1.4rem; height: 1.4rem;
    border: 2.5px solid var(--inv-text); border-radius: 50%;
    background: var(--inv-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}
.jagoan-cilik-passport .inv-form__choices label:active { translate: 0 4px; box-shadow: 0 1px 0 var(--inv-text); }
.jagoan-cilik-passport .inv-form__choices label:has(input:focus-visible) { outline: 3px solid var(--inv-primary); outline-offset: 3px; }

.jagoan-cilik-passport .inv-form button[type=submit], .jagoan-cilik-board .inv-form button[type=submit] { width: 100%; margin-top: .3rem; font-size: 1.05rem; }
.jagoan-cilik-body .inv-form__notice {
    padding: .8rem .9rem; border: 2.5px solid var(--inv-text); border-radius: .75rem;
    background: color-mix(in srgb, var(--inv-accent) 35%, #fff); color: var(--inv-text); font-size: .92rem; line-height: 1.5;
}
.jagoan-cilik-body .inv-form__error { border: 2.5px solid #a12a1f; border-radius: .75rem; }

/* ---------- RSVP: the passport ---------- */

.jagoan-cilik-passport {
    position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr);
    padding: .55rem .55rem .55rem 0;
    border: var(--jc-line); border-radius: 1.1rem; background: var(--inv-text);
    box-shadow: 0 7px 0 color-mix(in srgb, var(--inv-text) 70%, #000);
}
.jagoan-cilik-passport__cover {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
    color: var(--inv-accent);
}
.jagoan-cilik-passport__cover span { writing-mode: vertical-rl; rotate: 180deg; font: 400 1.05rem/1 var(--jc-display); letter-spacing: .3em; text-transform: uppercase; }
.jagoan-cilik-passport__emblem { width: 1.7rem; height: 1.7rem; }
.jagoan-cilik-passport__page {
    position: relative; padding: 1.3rem 1.05rem 1.3rem; border-radius: .75rem; text-align: left;
    background:
        repeating-radial-gradient(circle at 100% 0%, transparent 0 14px, color-mix(in srgb, var(--inv-sea) 22%, transparent) 14px 15px),
        var(--inv-paper);
}
.jagoan-cilik-passport__intro { margin-bottom: 1rem; font-size: .95rem; line-height: 1.5; }
.jagoan-cilik-rsvp .inv-rsvp__deadline {
    display: inline-block; margin-bottom: .9rem; padding: .25rem .7rem; border: 2px dashed var(--inv-text); border-radius: .5rem;
    font: 600 .85rem/1.4 var(--jc-round);
}
.jagoan-cilik-rsvp .inv-rsvp__done .inv-button { width: 100%; }

/* the "SIAP!" stamp lands with a bounce */
.jagoan-cilik-stamp {
    display: block; width: max-content; max-width: 100%; margin: 1.1rem auto .2rem; padding: .3rem 1rem;
    border: 4px solid var(--jc-stamp); border-radius: .7rem; color: var(--jc-stamp);
    box-shadow: inset 0 0 0 3px var(--inv-paper), inset 0 0 0 5px var(--jc-stamp);
    font: 400 2rem/1.1 var(--jc-display); letter-spacing: .05em; text-align: center;
    transform: rotate(-9deg);
}
@keyframes jagoan-cilik-stamp {
    0% { opacity: 0; transform: scale(2.6) rotate(-28deg); }
    55% { opacity: 1; transform: scale(.88) rotate(-7deg); }
    75% { transform: scale(1.06) rotate(-10deg); }
    100% { opacity: 1; transform: rotate(-9deg); }
}
html.inv-anim .jagoan-cilik-stamp.is-down { animation: jagoan-cilik-stamp .6s cubic-bezier(.3, 1.2, .5, 1) both; }

/* ---------- wishes: the cork board ---------- */

.jagoan-cilik-board {
    position: relative; padding: 1.3rem 1rem 1.2rem;
    border: var(--jc-line); border-radius: 1.1rem; box-shadow: var(--jc-shadow), inset 0 0 0 7px var(--inv-wood);
    background:
        radial-gradient(circle at 20% 30%, rgb(0 0 0 / .08) 0 1.5px, transparent 2px) 0 0 / 13px 13px,
        radial-gradient(circle at 70% 60%, rgb(255 255 255 / .18) 0 1.5px, transparent 2px) 0 0 / 17px 17px,
        color-mix(in srgb, var(--inv-wood) 38%, #f2cf98);
    text-align: left;
}
.jagoan-cilik-board .inv-form {
    position: relative; padding: 1.4rem 1rem 1.1rem; margin-top: .5rem;
    border: 2.5px solid var(--inv-text); border-radius: .8rem; background: var(--inv-paper); box-shadow: 0 4px 0 rgb(0 0 0 / .2);
}
.jagoan-cilik-board .inv-form::before, .jagoan-cilik-wishes .inv-wish::before {
    content: ''; position: absolute; left: 50%; top: -.55rem; width: 1.1rem; height: 1.1rem; margin-left: -.55rem;
    border: 2.5px solid var(--inv-text); border-radius: 50%; background: var(--inv-primary);
    box-shadow: inset -2px -2px 0 rgb(0 0 0 / .2);
}
.jagoan-cilik-wishes .inv-wishes__list { --inv-wishes-height: 23rem; gap: 1.1rem; margin-top: 1.4rem; padding: .7rem .5rem .6rem .3rem; }
.jagoan-cilik-wishes .inv-wish {
    position: relative; padding: .9rem .95rem .75rem;
    border: 2px solid var(--inv-text); border-radius: .3rem; background: #fff6b8;
    box-shadow: 0 4px 0 rgb(0 0 0 / .18); rotate: -.8deg;
}
.jagoan-cilik-wishes .inv-wish:nth-child(3n + 2) { background: #d6f1fb; rotate: .9deg; }
.jagoan-cilik-wishes .inv-wish:nth-child(3n) { background: #ffe0cf; rotate: -.4deg; }
.jagoan-cilik-wishes .inv-wish__name { font: 700 .98rem/1.3 var(--jc-round); }
.jagoan-cilik-wishes .inv-wish__message { font-size: .93rem; line-height: 1.5; }
.jagoan-cilik-wishes .inv-wish__time { opacity: 1; color: #4a4f63; }
.jagoan-cilik-wishes .inv-wish__reply { border-left-color: var(--inv-primary); background: rgb(255 255 255 / .6); }
.jagoan-cilik-wishes .inv-wishes__empty { padding: .7rem .9rem; border-radius: .6rem; background: rgb(255 255 255 / .75); opacity: 1; font-weight: 600; }
.jagoan-cilik-wishes .inv-wishes__more { margin-top: .3rem; }
.jagoan-cilik-board__sticker {
    position: absolute; z-index: 3; right: .6rem; top: -1.1rem; padding: .3rem .8rem;
    border: var(--jc-line); border-radius: .6rem; background: var(--inv-sea); box-shadow: 0 4px 0 var(--inv-text);
    font: 400 1.15rem/1.1 var(--jc-display); rotate: 8deg;
}
html.inv-anim .jagoan-cilik-board__sticker { animation: jagoan-cilik-pop-in .45s cubic-bezier(.3, 1.5, .5, 1) both; }

/* ---------- gift: the treasure chest ---------- */

.jagoan-cilik-chest { display: block; width: min(52%, 11.5rem); margin: -.6rem auto .8rem; overflow: visible; }
.jagoan-cilik-chest__lid { transform-box: fill-box; transform-origin: 0% 100%; transform: translateY(-12px) rotate(-14deg); }
.jagoan-cilik-chest__glow { opacity: .55; }
.jagoan-cilik-chest__coins { transform: translateY(-8px); }
@keyframes jagoan-cilik-lid {
    0%, 30% { transform: none; }
    55% { transform: translateY(-20px) rotate(-22deg); }
    75% { transform: translateY(-9px) rotate(-11deg); }
    100% { transform: translateY(-12px) rotate(-14deg); }
}
@keyframes jagoan-cilik-coins { 0%, 40% { transform: translateY(18px); opacity: 0; } 70% { transform: translateY(-14px); opacity: 1; } 100% { transform: translateY(-8px); } }
@keyframes jagoan-cilik-glow { 0%, 40% { opacity: 0; } 100% { opacity: .55; } }
html.inv-anim .jagoan-cilik-chest:not(.is-revealed) .jagoan-cilik-chest__lid { transform: none; }
html.inv-anim .jagoan-cilik-chest:not(.is-revealed) :is(.jagoan-cilik-chest__glow, .jagoan-cilik-chest__coins) { opacity: 0; }
html.inv-anim .jagoan-cilik-chest.is-revealed .jagoan-cilik-chest__lid { animation: jagoan-cilik-lid 1.1s ease-out .2s both; }
html.inv-anim .jagoan-cilik-chest.is-revealed .jagoan-cilik-chest__coins { animation: jagoan-cilik-coins 1.1s ease-out .2s both; }
html.inv-anim .jagoan-cilik-chest.is-revealed .jagoan-cilik-chest__glow { animation: jagoan-cilik-glow 1.1s ease-out .2s both; }
.jagoan-cilik-gift__intro { margin-bottom: 1.3rem; font-size: .98rem; }

.jagoan-cilik-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .75rem; }
.jagoan-cilik-gift .inv-gift__account {
    position: relative; display: grid; justify-items: center; align-content: start; gap: .3rem;
    padding: 1.5rem .7rem .9rem; margin: 0;
    border: var(--jc-line); border-radius: 1rem; background: var(--inv-paper); box-shadow: 0 5px 0 var(--inv-text);
    text-align: center; overflow-wrap: anywhere;
}
.jagoan-cilik-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
/* a gold coin on top of every ticket */
.jagoan-cilik-gift .inv-gift__accounts .inv-gift__account::before {
    content: ''; position: absolute; left: 50%; top: -.85rem; width: 1.6rem; height: 1.6rem; margin-left: -.8rem;
    border: var(--jc-line); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8d8, var(--inv-accent) 60%);
}
.jagoan-cilik-gift .inv-gift__bank { font: 600 .95rem/1.3 var(--jc-round); }
.jagoan-cilik-gift .inv-gift__logo { border: 2px solid var(--inv-text); box-shadow: none; }
.jagoan-cilik-gift .inv-gift__number { font: 400 1.12rem/1.25 var(--jc-display); letter-spacing: .03em; }
.jagoan-cilik-gift .inv-gift__holder { font-size: .85rem; line-height: 1.4; }
.jagoan-cilik-gift .inv-gift__account .inv-button { width: 100%; min-height: 2.75rem; margin-top: .35rem; padding: .45rem .5rem; font-size: .88rem; }
.jagoan-cilik-gift .inv-gift__address {
    margin-top: 1.2rem; padding: 1.2rem 1rem 1rem;
    border: 3px dashed var(--inv-text); background: var(--jc-kraft); box-shadow: 0 5px 0 var(--inv-text);
    font-size: .95rem; line-height: 1.5;
}
.jagoan-cilik-gift .inv-gift__address .inv-gift__bank {
    padding: .1rem .7rem; border-radius: 999px; background: var(--inv-text); color: var(--inv-accent);
    font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
}
.jagoan-cilik-gift .inv-gift__address .inv-button { width: auto; min-width: 12rem; }

/* ---------- co-hosts: bunting and name stickers ---------- */

.jagoan-cilik-bunting { position: relative; display: flex; justify-content: space-between; height: 2.6rem; margin: -.6rem -.3rem 1.3rem; }
.jagoan-cilik-bunting::before {
    content: ''; position: absolute; left: 0; right: 0; top: -1.2rem; height: 1.6rem;
    border-bottom: 2.5px solid var(--inv-text); border-radius: 0 0 50% 50%;
}
.jagoan-cilik-bunting span {
    position: relative; width: 1.9rem; height: 2.2rem; background: var(--inv-primary);
    clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 2px 0 var(--inv-text));
}
.jagoan-cilik-bunting span:nth-child(3n + 2) { background: var(--inv-accent); }
.jagoan-cilik-bunting span:nth-child(3n) { background: var(--inv-sea); }
.jagoan-cilik-bunting span:nth-child(2), .jagoan-cilik-bunting span:nth-child(8) { top: .2rem; }
.jagoan-cilik-bunting span:nth-child(3), .jagoan-cilik-bunting span:nth-child(7) { top: .32rem; }
.jagoan-cilik-bunting span:nth-child(4), .jagoan-cilik-bunting span:nth-child(5), .jagoan-cilik-bunting span:nth-child(6) { top: .4rem; }
html.inv-anim .jagoan-cilik-bunting span { transform-origin: 50% 0; animation: jagoan-cilik-sway 3s ease-in-out infinite; }
html.inv-anim .jagoan-cilik-bunting span:nth-child(even) { animation-delay: -1.5s; }
.jagoan-cilik-team { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem .55rem; margin: 0; padding: 0; list-style: none; }
.jagoan-cilik-team li {
    padding: .45rem .95rem; border: 2.5px solid var(--inv-text); border-radius: 999px; background: var(--inv-paper);
    box-shadow: 0 4px 0 var(--inv-text); font: 600 .95rem/1.35 var(--jc-round);
}
.jagoan-cilik-team li:nth-child(odd) { rotate: -1.5deg; }
.jagoan-cilik-team li:nth-child(even) { rotate: 1.5deg; background: color-mix(in srgb, var(--inv-accent) 35%, var(--inv-paper)); }

/* ---------- contacts: walkie-talkies ---------- */

.jagoan-cilik-contacts__intro { font-size: .98rem; }
.jagoan-cilik-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.3rem, 1fr)); gap: 2.2rem .9rem; margin-top: 2.6rem; }
.jagoan-cilik-radio {
    position: relative; display: grid; justify-items: center; gap: .25rem; padding: 2.5rem .8rem 1rem;
    border: var(--jc-line); border-radius: 1.3rem 1.3rem 1rem 1rem; box-shadow: 0 5px 0 var(--inv-text);
    background: color-mix(in srgb, var(--inv-sea) 55%, var(--inv-paper));
}
.jagoan-cilik-radio__antenna { position: absolute; left: 1.3rem; bottom: 100%; width: .6rem; height: 1.7rem; border: 2.5px solid var(--inv-text); border-bottom: 0; border-radius: .3rem .3rem 0 0; background: var(--inv-text); }
.jagoan-cilik-radio__antenna::after { content: ''; position: absolute; left: 50%; top: -.55rem; width: .8rem; height: .8rem; margin-left: -.4rem; border: 2.5px solid var(--inv-text); border-radius: 50%; background: var(--inv-primary); }
.jagoan-cilik-radio__grille {
    position: absolute; left: 50%; top: .75rem; width: 62%; height: 1rem; translate: -50% 0;
    border: 2px solid var(--inv-text); border-radius: .5rem;
    background: repeating-linear-gradient(90deg, var(--inv-text) 0 3px, var(--inv-paper) 3px 7px);
}
.jagoan-cilik-radio__name { font: 400 1.2rem/1.2 var(--jc-display); letter-spacing: .01em; }
.jagoan-cilik-radio__role { font-size: .88rem; line-height: 1.35; }
.jagoan-cilik-radio__phone { font-weight: 600; }
.jagoan-cilik-radio .inv-button { width: 100%; margin-top: .45rem; }

/* ---------- health protocol: wooden signs ---------- */

.jagoan-cilik-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.jagoan-cilik-signs li {
    display: grid; justify-items: center; gap: .4rem; padding: .9rem .6rem;
    border: var(--jc-line); border-radius: .8rem; box-shadow: 0 4px 0 var(--inv-text);
    background: linear-gradient(180deg, var(--jc-wood-light), var(--inv-wood)); color: #fff8e6;
    font: 600 .92rem/1.3 var(--jc-round);
}
.jagoan-cilik-signs .jagoan-cilik-icon { width: 2.4rem; height: 2.4rem; padding: .45rem; border: 2.5px solid var(--inv-text); border-radius: 50%; background: var(--inv-accent); color: var(--inv-text); }
.jagoan-cilik-protocol__note { margin-top: 1rem; font-size: .95rem; }

/* ---------- vendors: ticket stubs ---------- */

.jagoan-cilik-tickets { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.jagoan-cilik-ticket {
    position: relative; display: grid; grid-template-columns: 6.9rem minmax(0, 1fr);
    border: 2.5px solid var(--inv-text); border-radius: .8rem; background: var(--inv-paper); box-shadow: 0 4px 0 var(--inv-text);
    text-align: left;
}
.jagoan-cilik-ticket::before, .jagoan-cilik-ticket::after {
    content: ''; position: absolute; left: calc(6.9rem - .6rem); width: 1.2rem; height: 1.2rem;
    border: 2.5px solid var(--inv-text); border-radius: 50%; background: var(--inv-background);
}
.jagoan-cilik-ticket::before { top: -.7rem; clip-path: inset(50% 0 0 0); }
.jagoan-cilik-ticket::after { bottom: -.7rem; clip-path: inset(0 0 50% 0); }
.jagoan-cilik-ticket__role {
    display: grid; place-items: center; padding: .6rem .5rem; border-radius: .6rem 0 0 .6rem;
    border-right: 2.5px dashed var(--inv-text); background: var(--inv-accent);
    font: 600 .7rem/1.25 var(--jc-round); letter-spacing: .05em; text-transform: uppercase; text-align: center; overflow-wrap: break-word;
}
.jagoan-cilik-ticket__main { display: grid; align-content: center; gap: .1rem; padding: .65rem .95rem; min-width: 0; }
.jagoan-cilik-ticket__name { font: 400 1.08rem/1.25 var(--jc-display); letter-spacing: .01em; overflow-wrap: anywhere; }
.jagoan-cilik-ticket__ig { justify-self: start; padding: .2rem 0; color: var(--inv-text); font-size: .86rem; font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- closing: mission complete ---------- */

.jagoan-cilik-closing { padding-top: 3.6rem; padding-bottom: 3.3rem; }
.jagoan-cilik-finish {
    height: 1.7rem; margin: 0 -1.6rem 2.4rem; rotate: -2deg;
    border-block: var(--jc-line);
    background: conic-gradient(var(--inv-text) 25%, var(--inv-paper) 0 50%, var(--inv-text) 0 75%, var(--inv-paper) 0) 0 0 / 1.7rem 1.7rem;
}
.jagoan-cilik-badge--closing { width: min(60vw, 13.5rem); margin: 0 auto 2.4rem; }
.jagoan-cilik-badge--closing .jagoan-cilik-badge__ribbon { font-size: 1.35rem; min-height: 2.5rem; }
.jagoan-cilik-closing__message { font-size: 1.02rem; line-height: 1.65; }
.jagoan-cilik-closing__salam { margin-top: 1rem; font: 600 1rem/1.45 var(--jc-round); }
.jagoan-cilik-closing__sign { margin-top: 1.5rem; }
.jagoan-cilik-closing__signature { font-size: .95rem; line-height: 1.5; }
.jagoan-cilik-closing__names { margin-top: .35rem; font: 400 2.2rem/1.1 var(--jc-display); text-shadow: 2px 3px 0 var(--inv-primary); overflow-wrap: anywhere; }
@keyframes jagoan-cilik-stick { 0% { transform: rotate(-40deg) scale(.4); } 60% { transform: rotate(8deg) scale(1.08); } 100% { transform: none; } }
html.inv-anim .jagoan-cilik-badge--closing.is-revealed { animation: jagoan-cilik-stick .8s cubic-bezier(.3, .8, .4, 1) both; }

/* ---------- floating UI ---------- */

.jagoan-cilik-branding { color: var(--inv-text); font-weight: 500; opacity: 1; }
.jagoan-cilik-body .inv-checkin { border: var(--jc-line); box-shadow: var(--jc-shadow); }

.jagoan-cilik-nav.inv-nav {
    --inv-nav-bg: var(--inv-paper); --inv-nav-text: var(--inv-text); --inv-nav-active: var(--inv-text);
    border: var(--jc-line); box-shadow: 0 5px 0 var(--inv-text); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.jagoan-cilik-nav .inv-nav__item { font: 600 .62rem/1 var(--jc-round); }
.jagoan-cilik-nav .inv-nav__item.is-active { color: var(--inv-accent); }
.jagoan-cilik-body .inv-music__button { border: var(--jc-line); background: var(--inv-accent); color: var(--inv-text); box-shadow: 0 4px 0 var(--inv-text); }
.jagoan-cilik-body .inv-autoscroll { border: 2px solid var(--inv-text); color: var(--inv-text); }
.jagoan-cilik-body .inv-autoscroll--running { background: var(--inv-text); color: var(--inv-accent); }
.jagoan-cilik-body .inv-ambient { opacity: .6; }

/* ---------- cover fit: every phone ---------- */

@media (max-height: 760px) {
    .jagoan-cilik-cover__inner { padding: 2.9rem 1.3rem 2.4rem; gap: .55rem; }
    .jagoan-cilik-badge--cover { width: min(60vw, 30svh); margin-bottom: 1.2rem; }
    .jagoan-cilik-badge--cover .jagoan-cilik-badge__ribbon { min-height: 2.6rem; font-size: clamp(1.4rem, 7vw, 1.8rem); }
    .jagoan-cilik-cover__quote { font-size: .9rem; line-height: 1.4; }
}
@media (max-height: 660px) {
    .jagoan-cilik-cover__inner { padding: 2.5rem 1.2rem 2.2rem; gap: .4rem; }
    .jagoan-cilik-badge--cover { width: min(56vw, 27svh); margin-bottom: 1.05rem; }
    .jagoan-cilik-badge--cover .jagoan-cilik-badge__ribbon { min-height: 2.3rem; padding-block: .2rem; font-size: 1.4rem; }
    .jagoan-cilik-badge--cover.jagoan-cilik-badge--names-2 .jagoan-cilik-badge__ribbon { font-size: 1.15rem; }
    .jagoan-cilik-badge--cover.jagoan-cilik-badge--names-3 .jagoan-cilik-badge__ribbon { font-size: 1rem; }
    .jagoan-cilik-cover__kicker { font-size: .74rem; padding: .25rem .8rem; }
    .jagoan-cilik-cover__date { font-size: .92rem; padding: .3rem .85rem; }
    .jagoan-cilik-cover__quote { font-size: .84rem; line-height: 1.35; }
    .jagoan-cilik-cover__guest { padding-block: .4rem .45rem; }
    .jagoan-cilik-cover__guest-name { font-size: 1.05rem; }
    .jagoan-cilik-body .jagoan-cilik-sign { min-height: 3rem; padding-block: .6rem; font-size: 1.02rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .jagoan-cilik-cover--leave { transition: opacity .3s ease; }
    .jagoan-cilik-cover--gone { transform: none; }
}