/*
 * Template "Dunia Fantasi" (Ulang Tahun): one layout, three worlds picked by body[data-world]:
 *   kastil  (Kastil Ajaib)   purple, gold and pink; Grandstander titles
 *   dino    (Dino Park)      green, orange and earth; Luckiest Guy titles
 *   angkasa (Luar Angkasa)   navy, cyan and orange; Orbitron titles, light text on dark panels
 * Colors from the variant (<x-inv.head>): --inv-primary, --inv-accent, --inv-background, --inv-text,
 * --inv-paper (cards), --inv-pop, --inv-sky, --inv-ground, --inv-deep.
 * Every rule below works from a few tokens (--df-*); the world blocks only change tokens, shapes and art.
 * Motion only under html.inv-anim (off with "reduce motion"); scroll-driven parts inside @supports, where the
 * default (no support) is the finished, still picture.
 */

:root {
    --inv-primary: #7d45c9;
    --inv-accent: #f5b83d;
    --inv-background: #fff2f8;
    --inv-text: #3a2366;
    --inv-paper: #ffffff;
    --inv-pop: #ff6faa;
    --inv-sky: #d9c9ff;
    --inv-ground: #93d3a0;
    --inv-deep: #2b1853;
}

/* ---------- tokens ---------- */

.dunia-fantasi-body {
    --df-w: 460px;
    --df-line: var(--inv-text);                       /* illustration outlines */
    --df-edge: var(--inv-text);                       /* card borders */
    --df-ink: var(--inv-text);                        /* text on cards */
    --df-card: var(--inv-paper);
    --df-soft: color-mix(in srgb, var(--inv-primary) 10%, var(--df-card));
    --df-muted: color-mix(in srgb, var(--df-ink) 78%, var(--df-card));
    --df-hull: #ffffff;
    --df-rock: #b7834e;
    --df-on-primary: #fff;
    --df-on-accent: var(--inv-text);
    --df-border: 3px solid var(--df-edge);
    --df-shadow: 0 6px 0 var(--df-edge);
    --df-shadow-sm: 0 4px 0 var(--df-edge);
    --df-radius: 1.4rem;
    --df-display: 'Grandstander', 'Baloo 2', system-ui, sans-serif;
    --df-text: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --df-mono: 'Baloo 2', system-ui, sans-serif;
    --df-title-shadow: 2px 3px 0 var(--inv-accent);
    --df-ring: var(--inv-pop);
    --inv-ambient-1: var(--inv-accent);
    --inv-ambient-2: var(--inv-pop);
    --inv-radius: 16px;

    margin: 0;
    background: var(--inv-deep);
    color: var(--inv-text);
    font: 500 1.02rem/1.6 var(--df-text);
    -webkit-font-smoothing: antialiased;
}

.dunia-fantasi-body[data-world="dino"] {
    --df-display: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif;
    --df-radius: 1.2rem;
    --df-title-shadow: 2px 3px 0 var(--inv-accent);
    --df-ring: var(--inv-accent);
    --df-on-accent: var(--inv-text);
    --inv-ambient-1: var(--inv-ground);
    --inv-ambient-2: var(--inv-accent);
}

.dunia-fantasi-body[data-world="angkasa"] {
    --df-line: #0a1131;
    --df-edge: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-paper));
    --df-ink: var(--inv-text);
    --df-card: var(--inv-paper);
    --df-soft: color-mix(in srgb, var(--inv-primary) 14%, var(--inv-paper));
    --df-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-paper));
    --df-hull: #f2f5ff;
    --df-on-primary: var(--inv-deep);
    --df-on-accent: var(--inv-deep);
    --df-border: 2px solid var(--df-edge);
    --df-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-primary) 12%, transparent), 0 14px 30px -14px rgb(0 0 0 / .7);
    --df-shadow-sm: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 10%, transparent), 0 8px 18px -10px rgb(0 0 0 / .6);
    --df-radius: 1rem;
    --df-display: 'Orbitron', 'Baloo 2', system-ui, sans-serif;
    --df-mono: 'Orbitron', 'Baloo 2', system-ui, sans-serif;
    --df-title-shadow: 0 0 18px color-mix(in srgb, var(--inv-primary) 70%, transparent);
    --df-ring: var(--inv-accent);
    --inv-ambient-1: var(--inv-pop);
    --inv-ambient-2: var(--inv-primary);
}

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

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

/* ---------- backdrop (wide screens) and the page column ---------- */

.dunia-fantasi-backdrop {
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--inv-pop) 30%, transparent), transparent 40%),
        radial-gradient(circle at 85% 75%, color-mix(in srgb, var(--inv-sky) 50%, transparent), transparent 45%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)), var(--inv-deep));
}
[data-world="dino"] .dunia-fantasi-backdrop {
    background:
        radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--inv-accent) 35%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 80%, var(--inv-deep)), var(--inv-deep));
}
[data-world="angkasa"] .dunia-fantasi-backdrop {
    background:
        radial-gradient(circle, rgb(255 255 255 / .8) 0 1px, transparent 1.6px) 0 0 / 90px 90px,
        radial-gradient(circle, rgb(255 255 255 / .5) 0 1px, transparent 1.4px) 40px 55px / 130px 130px,
        radial-gradient(ellipse at 20% 30%, color-mix(in srgb, var(--inv-ground) 45%, transparent), transparent 50%),
        radial-gradient(ellipse at 80% 80%, color-mix(in srgb, var(--inv-primary) 25%, transparent), transparent 50%),
        var(--inv-deep);
}
.dunia-fantasi-backdrop__item { position: absolute; opacity: .5; }
.dunia-fantasi-backdrop__item--a { left: 4%; top: 12%; width: 12rem; height: 8rem; }
.dunia-fantasi-backdrop__item--b { left: 9%; top: 58%; width: 6rem; height: 10rem; }
.dunia-fantasi-backdrop__item--c { right: 5%; top: 30%; width: 14rem; height: 9rem; }
.dunia-fantasi-backdrop__item--d { right: 10%; top: 72%; width: 7rem; height: 9rem; }
/* the backdrop drifts in two speeds while the page scrolls */
@keyframes dunia-fantasi-back-slow { to { translate: 0 -12vh; } }
@keyframes dunia-fantasi-back-fast { to { translate: 0 -40vh; } }
@supports (animation-timeline: scroll()) {
    html.inv-anim .dunia-fantasi-backdrop__item { animation: dunia-fantasi-back-slow linear both; animation-timeline: scroll(root); }
    html.inv-anim :is(.dunia-fantasi-backdrop__item--b, .dunia-fantasi-backdrop__item--d) { animation-name: dunia-fantasi-back-fast; }
}

.dunia-fantasi-page {
    position: relative; z-index: 1;
    width: min(100%, var(--df-w)); min-height: 100vh; margin: 0 auto;
    overflow-x: clip;
    background: var(--inv-background);
}
[data-world="angkasa"] .dunia-fantasi-page {
    background:
        radial-gradient(circle, rgb(255 255 255 / .55) 0 1px, transparent 1.5px) 0 0 / 70px 70px,
        radial-gradient(circle, rgb(255 255 255 / .35) 0 1px, transparent 1.4px) 30px 40px / 110px 110px,
        var(--inv-background);
}
[data-world="dino"] .dunia-fantasi-page {
    background:
        radial-gradient(circle, color-mix(in srgb, var(--df-rock) 22%, transparent) 0 1.5px, transparent 2px) 0 0 / 26px 26px,
        var(--inv-background);
}
[data-world="kastil"] .dunia-fantasi-page {
    background:
        radial-gradient(circle, color-mix(in srgb, var(--inv-pop) 18%, transparent) 0 1.5px, transparent 2px) 0 0 / 28px 28px,
        var(--inv-background);
}

@media (min-width: 520px) {
    .dunia-fantasi-page { box-shadow: 0 0 0 4px var(--df-line), 0 30px 80px rgb(0 0 0 / .35); }
}
@media (max-width: 519px) {
    .dunia-fantasi-backdrop { display: none; }
}

.dunia-fantasi-preview {
    position: fixed; z-index: 60; top: 0; left: 0; right: 0; padding: .45rem 1rem;
    background: var(--inv-accent); color: var(--df-on-accent); text-align: center;
    font: 700 .8rem/1.4 var(--df-text);
}

/* ---------- buttons ---------- */

.dunia-fantasi-body .inv-button {
    min-height: 2.9rem; padding: .6rem 1.2rem; gap: .45rem;
    border: var(--df-border); border-radius: 999px;
    background: var(--inv-accent); color: var(--df-on-accent);
    font: 700 1rem/1.15 var(--df-text);
    box-shadow: var(--df-shadow-sm);
    transition: translate .12s ease, box-shadow .12s ease, filter .2s ease;
}
.dunia-fantasi-body .inv-button--outline { background: var(--df-card); color: var(--df-ink); }
.dunia-fantasi-body .inv-button:focus-visible { outline: 3px solid var(--inv-pop); outline-offset: 3px; }
html .dunia-fantasi-body .inv-button:active { transform: none; translate: 0 3px; }
.dunia-fantasi-body[data-world="angkasa"] .inv-button {
    border-color: color-mix(in srgb, var(--inv-accent) 70%, #fff);
    box-shadow: 0 0 18px -2px color-mix(in srgb, var(--inv-accent) 60%, transparent);
    letter-spacing: .02em;
}
.dunia-fantasi-body[data-world="angkasa"] .inv-button--outline {
    border-color: var(--df-edge); background: transparent; color: var(--inv-text);
    box-shadow: inset 0 0 12px -4px color-mix(in srgb, var(--inv-primary) 60%, transparent);
}
.dunia-fantasi-body[data-world="angkasa"] .inv-button:focus-visible { outline-color: var(--inv-pop); }

/* ---------- cover: shared column ---------- */

.dunia-fantasi-cover {
    position: fixed; inset: 0; z-index: 30;
    width: min(100%, var(--df-w)); margin: 0 auto;
    display: flex; overflow-x: hidden; overflow-y: auto;
    color: #fff;
}
.dunia-fantasi-cover__inner {
    position: relative; z-index: 3;
    width: 100%; min-height: 100%; margin: auto; padding: 3rem 1.4rem 2.4rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
    text-align: center;
}
.dunia-fantasi-cover__kicker {
    display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; padding: .3rem 1rem;
    border-radius: 999px; font: 700 .82rem/1.3 var(--df-text); letter-spacing: .1em; text-transform: uppercase;
}
.dunia-fantasi-cover__kicker .dunia-fantasi-icon { width: .8em; height: .8em; }
.dunia-fantasi-cover__name {
    margin-top: .35rem; font: 900 clamp(2.6rem, 13vw, 3.4rem)/1 var(--df-display); letter-spacing: .01em; overflow-wrap: anywhere;
}
.dunia-fantasi-cover__date {
    display: inline-flex; align-items: center; gap: .5rem; padding: .35rem 1rem; border-radius: 999px;
    font: 700 .98rem/1.3 var(--df-text);
}
.dunia-fantasi-cover__quote { max-width: 21rem; font: 500 .95rem/1.45 var(--df-text); }
.dunia-fantasi-cover__guest {
    width: min(100%, 17.5rem); padding: .55rem 1rem .6rem; border-radius: 1rem; text-align: center;
}
.dunia-fantasi-cover__guest-label { font: 700 .72rem/1.3 var(--df-text); letter-spacing: .16em; text-transform: uppercase; }
.dunia-fantasi-cover__guest-name { margin-top: .1rem; font: 700 1.15rem/1.3 var(--df-text); overflow-wrap: anywhere; }
.dunia-fantasi-body .dunia-fantasi-open {
    min-height: 3.3rem; margin-top: .25rem; padding: .7rem 1.9rem; gap: .55rem; font-size: 1.12rem;
}
.dunia-fantasi-open .dunia-fantasi-icon { width: 1.25rem; height: 1.25rem; }

@keyframes dunia-fantasi-pop-in {
    0% { opacity: 0; transform: scale(.6) translateY(10px); }
    65% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: none; }
}
@keyframes dunia-fantasi-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dunia-fantasi-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes dunia-fantasi-drift { 0%, 100% { translate: 0 0; } 50% { translate: 14px 0; } }
@keyframes dunia-fantasi-sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes dunia-fantasi-twinkle { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .55; opacity: .55; } }
@keyframes dunia-fantasi-wiggle {
    0%, 80%, 100% { rotate: 0deg; }
    84% { rotate: -3deg; } 88% { rotate: 3deg; } 92% { rotate: -1.5deg; }
}
@keyframes dunia-fantasi-spin { to { rotate: 360deg; } }
@keyframes dunia-fantasi-blink { 50% { opacity: .25; } }

html.inv-anim .dunia-fantasi-cover__kicker { animation: dunia-fantasi-pop-in .5s cubic-bezier(.3, 1.4, .5, 1) .05s both; }
html.inv-anim .dunia-fantasi-portrait--cover { animation: dunia-fantasi-pop-in .7s cubic-bezier(.3, 1.3, .5, 1) .15s both; }
html.inv-anim .dunia-fantasi-cover__name { animation: dunia-fantasi-fade-up .55s ease-out .35s both; }
html.inv-anim .dunia-fantasi-cover__date { animation: dunia-fantasi-pop-in .5s cubic-bezier(.3, 1.4, .5, 1) .5s both; }
html.inv-anim .dunia-fantasi-cover__quote { animation: dunia-fantasi-fade-up .5s ease-out .6s both; }
html.inv-anim .dunia-fantasi-cover__guest { animation: dunia-fantasi-pop-in .5s cubic-bezier(.3, 1.4, .5, 1) .7s both; }
html.inv-anim .dunia-fantasi-body .dunia-fantasi-open { animation: dunia-fantasi-pop-in .5s cubic-bezier(.3, 1.4, .5, 1) .8s both, dunia-fantasi-wiggle 3.6s ease-in-out 2.2s infinite; }

/* on open the text leaves first, then each world plays its own exit (below) */
.dunia-fantasi-cover.is-leaving .dunia-fantasi-cover__inner > :not(.dunia-fantasi-portrait--cover) { opacity: 0; transform: scale(.94); transition: opacity .22s ease, transform .3s ease; }
html.inv-anim .dunia-fantasi-cover.is-leaving .dunia-fantasi-cover__inner > * { animation: none; }

/* ---------- cover: Kastil Ajaib, the gate ---------- */

[data-world="kastil"] .dunia-fantasi-cover {
    --gate-top: 9svh;
    --gate-arch: 24svh;
}
.dunia-fantasi-gate { position: absolute; inset: 0; perspective: 1100px; pointer-events: none; }
.dunia-fantasi-gate__sky, .dunia-fantasi-gate__corner {
    position: absolute;
    background: linear-gradient(180deg, var(--inv-sky), color-mix(in srgb, var(--inv-pop) 40%, var(--inv-background))) 0 0 / 100% calc(var(--gate-top) + var(--gate-arch)) no-repeat;
}
.dunia-fantasi-gate__corner { background-position: 0 calc(var(--gate-top) * -1); }
.dunia-fantasi-gate__sky { left: 0; right: 0; top: 0; height: calc(var(--gate-top) + 1px); }
.dunia-fantasi-gate__corner { top: var(--gate-top); width: 50%; height: var(--gate-arch); }
.dunia-fantasi-gate__corner--l {
    left: 0;
    -webkit-mask: radial-gradient(100% 100% at 100% 100%, transparent 99%, #000 99.5%);
    mask: radial-gradient(100% 100% at 100% 100%, transparent 99%, #000 99.5%);
}
.dunia-fantasi-gate__corner--r {
    right: 0;
    -webkit-mask: radial-gradient(100% 100% at 0% 100%, transparent 99%, #000 99.5%);
    mask: radial-gradient(100% 100% at 0% 100%, transparent 99%, #000 99.5%);
}
.dunia-fantasi-gate__tower { position: absolute; z-index: 1; top: calc(var(--gate-top) - 6svh); width: min(15vw, 4.2rem, 11svh); height: calc(var(--gate-arch) + 4svh); }
.dunia-fantasi-gate__tower--l { left: .3rem; }
.dunia-fantasi-gate__tower--r { right: .3rem; }
.dunia-fantasi-gate__cloud { position: absolute; left: 34%; top: .5svh; width: min(22vw, 6rem); height: 7svh; opacity: .9; }
.dunia-fantasi-gate__door {
    position: absolute; z-index: 2; top: var(--gate-top); bottom: 0; width: 50%;
    border: 3px solid var(--df-line);
    background:
        radial-gradient(circle, var(--inv-accent) 0 3.5px, var(--df-line) 4px 5px, transparent 5.5px) 50% 33% / 1.7rem 1.2rem repeat-x,
        radial-gradient(circle, var(--inv-accent) 0 3.5px, var(--df-line) 4px 5px, transparent 5.5px) 50% 81% / 1.7rem 1.2rem repeat-x,
        linear-gradient(transparent calc(33% - .55rem), color-mix(in srgb, var(--inv-accent) 75%, var(--inv-primary)) calc(33% - .55rem) calc(33% + .55rem), transparent calc(33% + .55rem)),
        linear-gradient(transparent calc(81% - .55rem), color-mix(in srgb, var(--inv-accent) 75%, var(--inv-primary)) calc(81% - .55rem) calc(81% + .55rem), transparent calc(81% + .55rem)),
        repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), rgb(0 0 0 / .16) calc(25% - 2px) 25%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 82%, var(--inv-pop)), color-mix(in srgb, var(--inv-primary) 80%, var(--inv-deep)));
    backface-visibility: hidden;
}
.dunia-fantasi-gate__door--l { left: 0; border-top-left-radius: 100% var(--gate-arch); transform-origin: 0 50%; border-right-width: 1.5px; }
.dunia-fantasi-gate__door--r { right: 0; border-top-right-radius: 100% var(--gate-arch); transform-origin: 100% 50%; border-left-width: 1.5px; }
/* a gold arch line along the top of both doors */
.dunia-fantasi-gate__door::before {
    content: ''; position: absolute; inset: .7rem .7rem auto; height: calc(var(--gate-arch) - .7rem);
    border: .3rem solid color-mix(in srgb, var(--inv-accent) 85%, #fff); border-bottom: 0; opacity: .8;
}
.dunia-fantasi-gate__door--l::before { right: 0; border-right: 0; border-top-left-radius: 100% calc(var(--gate-arch) - .7rem); }
.dunia-fantasi-gate__door--r::before { left: 0; border-left: 0; border-top-right-radius: 100% calc(var(--gate-arch) - .7rem); }
.dunia-fantasi-gate__ring {
    position: absolute; top: 93%; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    border: .3rem solid var(--inv-accent); box-shadow: 0 0 0 2px var(--df-line), inset 0 0 0 2px var(--df-line);
}
.dunia-fantasi-gate__door--l .dunia-fantasi-gate__ring { right: .7rem; }
.dunia-fantasi-gate__door--r .dunia-fantasi-gate__ring { left: .7rem; }

[data-world="kastil"] .dunia-fantasi-cover__inner { padding-top: calc(var(--gate-top) + 3.2rem); }
[data-world="kastil"] .dunia-fantasi-cover__kicker { background: var(--inv-accent); color: var(--df-line); border: 2.5px solid var(--df-line); box-shadow: 0 3px 0 var(--df-line); }
[data-world="kastil"] .dunia-fantasi-cover__name { color: #fff; text-shadow: 0 3px 0 var(--df-line), 0 0 22px color-mix(in srgb, var(--inv-pop) 80%, transparent); }
[data-world="kastil"] .dunia-fantasi-cover__date { background: var(--df-card); color: var(--df-line); border: 2.5px solid var(--df-line); }
[data-world="kastil"] .dunia-fantasi-cover__date .dunia-fantasi-icon { color: var(--inv-primary); }
[data-world="kastil"] .dunia-fantasi-cover__quote { color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
[data-world="kastil"] .dunia-fantasi-cover__guest {
    background: color-mix(in srgb, var(--inv-paper) 94%, var(--inv-accent)); color: var(--df-line);
    border: 3px solid var(--df-line); box-shadow: inset 0 0 0 3px var(--inv-paper), inset 0 0 0 5px var(--inv-accent), 0 4px 0 var(--df-line);
}

@keyframes dunia-fantasi-door-l { to { transform: rotateY(-104deg); } }
@keyframes dunia-fantasi-door-r { to { transform: rotateY(104deg); } }
html.inv-anim [data-world="kastil"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-gate__door--l { animation: dunia-fantasi-door-l .78s cubic-bezier(.55, 0, .3, 1) .2s both; }
html.inv-anim [data-world="kastil"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-gate__door--r { animation: dunia-fantasi-door-r .78s cubic-bezier(.55, 0, .3, 1) .2s both; }
html.inv-anim [data-world="kastil"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-portrait--cover { opacity: 0; transform: scale(.9); transition: opacity .22s ease, transform .3s ease; }
[data-world="kastil"] .dunia-fantasi-cover--leave { transition: opacity .3s ease .8s; }
[data-world="kastil"] .dunia-fantasi-cover--gone { opacity: 0; }
html.inv-anim [data-world="kastil"] .dunia-fantasi-gate__tower--l { transform-origin: 50% 100%; }
html.inv-anim [data-world="kastil"] .dunia-fantasi-gate__cloud { animation: dunia-fantasi-drift 8s ease-in-out infinite; }

/* ---------- cover: Dino Park, the egg ---------- */

[data-world="dino"] .dunia-fantasi-cover {
    color: var(--inv-text);
    background:
        radial-gradient(ellipse 70% 40% at 50% 42%, color-mix(in srgb, #fff 70%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-sky), var(--inv-background) 75%);
}
.dunia-fantasi-jungle { position: absolute; inset: 0; pointer-events: none; }
.dunia-fantasi-jungle__volcano { position: absolute; right: -3%; top: 2svh; width: min(36vw, 9.5rem, 22svh); aspect-ratio: 200 / 170; opacity: .85; }
.dunia-fantasi-jungle__leaf { position: absolute; }
.dunia-fantasi-jungle__leaf--a { left: -2.2rem; top: -1.2rem; width: min(30vw, 7.5rem, 17svh); aspect-ratio: 100 / 116; rotate: 140deg; }
.dunia-fantasi-jungle__leaf--b { left: -1rem; top: 26svh; width: min(18vw, 4.6rem, 12svh); aspect-ratio: 80 / 130; rotate: 18deg; opacity: .9; }
.dunia-fantasi-jungle__leaf--c { right: -1.2rem; bottom: 9svh; width: min(20vw, 5rem, 13svh); aspect-ratio: 80 / 130; rotate: -24deg; }
.dunia-fantasi-jungle__leaf--d { left: -2rem; bottom: -1rem; width: min(30vw, 7.5rem, 17svh); aspect-ratio: 100 / 116; rotate: 32deg; }
.dunia-fantasi-jungle__ground { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 9svh; }
html.inv-anim .dunia-fantasi-jungle__leaf--a { transform-origin: 30% 30%; animation: dunia-fantasi-sway 5s ease-in-out infinite; }
html.inv-anim .dunia-fantasi-jungle__leaf--c { transform-origin: 50% 100%; animation: dunia-fantasi-sway 4.4s ease-in-out -2s infinite; }

[data-world="dino"] .dunia-fantasi-cover__kicker { background: var(--inv-primary); color: #fff; border: 2.5px solid var(--df-line); box-shadow: 0 3px 0 var(--df-line); rotate: -2deg; }
[data-world="dino"] .dunia-fantasi-cover__name { color: var(--inv-primary); text-shadow: 3px 3px 0 var(--inv-accent), 4px 5px 0 var(--df-line); letter-spacing: .03em; }
[data-world="dino"] .dunia-fantasi-cover__date { background: var(--df-card); border: 2.5px solid var(--df-line); box-shadow: 0 3px 0 var(--df-line); rotate: 1.5deg; }
[data-world="dino"] .dunia-fantasi-cover__date .dunia-fantasi-icon { color: var(--inv-pop); }
[data-world="dino"] .dunia-fantasi-cover__quote { color: color-mix(in srgb, var(--inv-text) 90%, var(--inv-background)); font-weight: 600; }
[data-world="dino"] .dunia-fantasi-cover__guest {
    background: color-mix(in srgb, var(--df-rock) 22%, var(--df-card)); border: 3px solid var(--df-line); box-shadow: 0 4px 0 var(--df-line);
    border-radius: 1.6rem 1rem 1.8rem 1.1rem / 1.2rem 1.7rem 1.1rem 1.6rem;
}

/* opening: the egg wobbles, cracks along the zigzag, the top flies off and the baby dino pops out */
@keyframes dunia-fantasi-egg-wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -6deg; } 75% { rotate: 6deg; } }
@keyframes dunia-fantasi-egg-top { 0% { transform: none; } 100% { transform: translate(-14%, -95%) rotate(-38deg); opacity: 0; } }
@keyframes dunia-fantasi-egg-bottom { to { transform: translateY(10%) rotate(5deg); } }
@keyframes dunia-fantasi-hatch { 0% { opacity: 0; transform: translateY(40%) scale(.6); } 60% { opacity: 1; transform: translateY(-34%) scale(1.08); } 100% { opacity: 1; transform: translateY(-26%) scale(1); } }
html.inv-anim [data-world="dino"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-portrait__frame { animation: dunia-fantasi-egg-wobble .22s ease-in-out 2 both; }
html.inv-anim [data-world="dino"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-portrait__half--top { animation: dunia-fantasi-egg-top .5s cubic-bezier(.3, .6, .5, 1) .32s both; }
html.inv-anim [data-world="dino"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-portrait__half--bottom { animation: dunia-fantasi-egg-bottom .4s ease-out .32s both; }
html.inv-anim [data-world="dino"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-portrait__hatch { animation: dunia-fantasi-hatch .45s cubic-bezier(.3, 1.4, .5, 1) .4s both; }
html.inv-anim [data-world="dino"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-portrait__hatch span { animation: dunia-fantasi-pop-in .3s cubic-bezier(.3, 1.5, .5, 1) .62s both; }
html.inv-anim [data-world="dino"] .dunia-fantasi-cover.is-leaving :is(.dunia-fantasi-portrait__badge, .dunia-fantasi-portrait__crest) { opacity: 0; transition: opacity .15s ease; }
[data-world="dino"] .dunia-fantasi-cover--leave { transition: opacity .32s ease .82s, transform .32s ease .82s; }
[data-world="dino"] .dunia-fantasi-cover--gone { opacity: 0; transform: scale(1.04); }

/* ---------- cover: Luar Angkasa, the launch ---------- */

[data-world="angkasa"] .dunia-fantasi-cover {
    color: var(--inv-text);
    background:
        radial-gradient(circle, rgb(255 255 255 / .9) 0 1px, transparent 1.6px) 0 0 / 64px 64px,
        radial-gradient(circle, rgb(255 255 255 / .55) 0 1px, transparent 1.4px) 22px 34px / 92px 92px,
        radial-gradient(circle, color-mix(in srgb, var(--inv-pop) 80%, transparent) 0 1.4px, transparent 2px) 50px 10px / 150px 150px,
        radial-gradient(ellipse 80% 50% at 50% 45%, color-mix(in srgb, var(--inv-sky) 70%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-deep), var(--inv-background) 60%, color-mix(in srgb, var(--inv-ground) 25%, var(--inv-background)));
}
.dunia-fantasi-space { position: absolute; inset: 0; pointer-events: none; }
.dunia-fantasi-space__planet { position: absolute; right: -2.6rem; top: 1.6svh; width: min(44vw, 11rem, 22svh); aspect-ratio: 120 / 80; }
.dunia-fantasi-space__moon { position: absolute; left: -1.4rem; top: 30svh; width: min(20vw, 5rem, 12svh); aspect-ratio: 1; }
.dunia-fantasi-space__rocket { position: absolute; left: .6rem; bottom: 6svh; width: min(9vw, 2.4rem, 7svh); aspect-ratio: 60 / 110; rotate: 18deg; }
.dunia-fantasi-space__flame {
    position: absolute; left: 22%; right: 22%; top: 100%; height: 34svh; opacity: 0;
    border-radius: 0 0 50% 50% / 0 0 80% 80%;
    background: radial-gradient(ellipse 50% 70% at 50% 0%, #fff 0 18%, var(--inv-pop) 34%, var(--inv-accent) 56%, transparent 74%);
    filter: blur(2px);
}
.dunia-fantasi-space__flame span {
    position: absolute; left: -30%; right: -30%; top: 10%; height: 70%; border-radius: 50%;
    background: radial-gradient(circle, rgb(255 255 255 / .5), transparent 65%);
}
html.inv-anim .dunia-fantasi-space__planet { animation: dunia-fantasi-bob 6s ease-in-out infinite; }
html.inv-anim .dunia-fantasi-space__moon { animation: dunia-fantasi-bob 7s ease-in-out -2s infinite; }
html.inv-anim .dunia-fantasi-space__rocket { animation: dunia-fantasi-bob 3s ease-in-out infinite; }

.dunia-fantasi-launch { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; }
.dunia-fantasi-launch span {
    grid-area: 1 / 1; opacity: 0;
    font: 800 clamp(6rem, 34vw, 9rem)/1 'Orbitron', var(--df-text); color: var(--inv-accent);
    text-shadow: 0 0 30px color-mix(in srgb, var(--inv-accent) 80%, transparent), 0 4px 0 var(--df-line);
}
[data-world="angkasa"] .dunia-fantasi-cover__kicker {
    border: 1.5px solid var(--df-edge); color: var(--inv-primary); background: color-mix(in srgb, var(--inv-deep) 70%, transparent);
    font-family: var(--df-mono); font-size: .72rem; letter-spacing: .14em;
}
[data-world="angkasa"] .dunia-fantasi-cover__kicker .dunia-fantasi-icon { color: var(--inv-pop); }
[data-world="angkasa"] .dunia-fantasi-cover__name { font-weight: 800; font-size: clamp(2.2rem, 11vw, 3rem); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 0 22px color-mix(in srgb, var(--inv-primary) 85%, transparent), 0 3px 0 var(--df-line); }
[data-world="angkasa"] .dunia-fantasi-cover__date { border: 1.5px solid var(--df-edge); background: color-mix(in srgb, var(--inv-paper) 85%, transparent); }
[data-world="angkasa"] .dunia-fantasi-cover__date .dunia-fantasi-icon { color: var(--inv-accent); }
[data-world="angkasa"] .dunia-fantasi-cover__quote { color: color-mix(in srgb, var(--inv-text) 88%, var(--inv-background)); }
[data-world="angkasa"] .dunia-fantasi-cover__guest {
    border: 1.5px solid var(--df-edge); border-radius: .8rem; background: color-mix(in srgb, var(--inv-paper) 88%, transparent);
    box-shadow: inset 0 0 18px -6px color-mix(in srgb, var(--inv-primary) 70%, transparent);
}
[data-world="angkasa"] .dunia-fantasi-cover__guest-label { color: var(--inv-primary); font-family: var(--df-mono); font-size: .62rem; }

/* opening: 3, 2, 1 flash, the cover shakes, the flame lights and the whole cover lifts off */
@keyframes dunia-fantasi-count { 0% { opacity: 0; transform: scale(1.7); } 25% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.8); } }
@keyframes dunia-fantasi-rumble { 0%, 100% { translate: 0 0; } 25% { translate: -2px 1px; } 50% { translate: 2px -1px; } 75% { translate: -1px -2px; } }
@keyframes dunia-fantasi-flame { 0% { opacity: 0; transform: scaleY(.2); transform-origin: top; } 100% { opacity: 1; transform: scaleY(1); transform-origin: top; } }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-cover.is-leaving { overflow: visible; }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-launch span { animation: dunia-fantasi-count .24s ease-out both; }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-launch span:nth-child(2) { animation-delay: .22s; }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-launch span:nth-child(3) { animation-delay: .44s; }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-space { animation: dunia-fantasi-rumble .08s linear .2s 6; }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-space__flame { animation: dunia-fantasi-flame .25s ease-out .55s both; }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-cover.is-leaving .dunia-fantasi-portrait--cover { opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .3s ease; }
[data-world="angkasa"] .dunia-fantasi-cover--leave { transition: transform .5s cubic-bezier(.55, 0, .85, .3) .66s, opacity .2s linear .96s; }
[data-world="angkasa"] .dunia-fantasi-cover--gone { transform: translateY(-120%); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
    html:not(.inv-anim) [data-world="angkasa"] .dunia-fantasi-launch { display: none; }
}

/* ---------- portrait: medallion (kastil), egg (dino), porthole (angkasa) ---------- */

.dunia-fantasi-portrait { position: relative; flex: none; width: var(--df-pw, 12rem); aspect-ratio: 1; margin: 0 auto; }
.dunia-fantasi-portrait--cover { --df-pw: min(25svh, 12.5rem, 56vw); margin-block: .5rem .4rem; }
.dunia-fantasi-portrait--profile { --df-pw: 12rem; margin-bottom: 1.4rem; }
.dunia-fantasi-portrait--closing { --df-pw: 10.5rem; margin-bottom: 1.8rem; }
.dunia-fantasi-portrait__frame { position: absolute; inset: 0; border-radius: 50%; }
.dunia-fantasi-portrait__half {
    position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; overflow: hidden; border-radius: inherit;
    background: radial-gradient(circle at 50% 38%, var(--inv-paper), color-mix(in srgb, var(--inv-sky) 70%, var(--inv-paper)));
}
.dunia-fantasi-portrait__half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.dunia-fantasi-portrait__half::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 4px var(--df-line); pointer-events: none; }
.dunia-fantasi-portrait__mascot { position: relative; width: 74%; height: 74%; }
.dunia-fantasi-portrait__half--bottom { display: none; }
.dunia-fantasi-portrait__crest { position: absolute; z-index: 2; left: 50%; top: -17%; width: 40%; aspect-ratio: 32 / 26; translate: -50% 0; }
.dunia-fantasi-portrait__badge {
    position: absolute; z-index: 3; right: -5%; bottom: 0; display: grid; place-content: center; width: 33%; aspect-ratio: 1;
    border: 3px solid var(--df-line); border-radius: 50%; background: var(--df-ring); color: #fff; box-shadow: 0 4px 0 var(--df-line);
    text-align: center; text-shadow: 0 2px 0 var(--df-line);
}
.dunia-fantasi-portrait__badge small { display: block; font: 800 .6rem/1 var(--df-text); letter-spacing: .1em; text-transform: uppercase; text-shadow: none; }
.dunia-fantasi-portrait__badge b { display: block; font: 900 1.55rem/1 var(--df-display); }
.dunia-fantasi-portrait__badge.is-initial b { font-size: 1.7rem; }
.dunia-fantasi-portrait__hatch { display: none; }

/* kastil: a gold medallion with a dotted inner ring and a crown */
[data-world="kastil"] .dunia-fantasi-portrait__frame {
    box-shadow: 0 0 0 6px var(--inv-accent), 0 0 0 9px var(--df-line), 0 9px 0 9px var(--df-line);
}
[data-world="kastil"] .dunia-fantasi-portrait__frame::before {
    content: ''; position: absolute; inset: -4px; z-index: 2; border-radius: 50%; pointer-events: none;
    border: 3px dotted color-mix(in srgb, #fff 80%, var(--inv-accent));
}

/* dino: an egg with speckles; on the cover it is made of two halves that crack apart */
[data-world="dino"] .dunia-fantasi-portrait { aspect-ratio: .8; }
[data-world="dino"] .dunia-fantasi-portrait--cover { --df-pw: min(23svh, 11.5rem, 50vw); }
[data-world="dino"] .dunia-fantasi-portrait__frame { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; filter: drop-shadow(0 6px 0 var(--df-line)); }
[data-world="dino"] .dunia-fantasi-portrait__half {
    background:
        radial-gradient(circle at 28% 30%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-paper)) 0 6%, transparent 6.5%),
        radial-gradient(circle at 70% 22%, color-mix(in srgb, var(--inv-ground) 75%, var(--inv-paper)) 0 7%, transparent 7.5%),
        radial-gradient(circle at 62% 58%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-paper)) 0 5%, transparent 5.5%),
        radial-gradient(circle at 30% 72%, color-mix(in srgb, var(--inv-ground) 75%, var(--inv-paper)) 0 6%, transparent 6.5%),
        radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-paper)) 0 4%, transparent 4.5%),
        radial-gradient(ellipse at 35% 30%, #fff, var(--inv-paper) 60%, color-mix(in srgb, var(--df-rock) 25%, var(--inv-paper)));
}
[data-world="dino"] .dunia-fantasi-portrait__half::after { box-shadow: inset 0 0 0 4px var(--df-line), inset -10px -14px 0 rgb(0 0 0 / .06); }
[data-world="dino"] .dunia-fantasi-portrait__half--bottom { display: grid; }
[data-world="dino"] .dunia-fantasi-portrait--cover .dunia-fantasi-portrait__half--top {
    clip-path: polygon(0 0, 100% 0, 100% 55%, 92% 47%, 83% 56%, 74% 47%, 65% 56%, 56% 47%, 47% 56%, 38% 47%, 29% 56%, 20% 47%, 11% 56%, 0 48%);
}
[data-world="dino"] .dunia-fantasi-portrait__half--bottom {
    clip-path: polygon(0 48%, 11% 56%, 20% 47%, 29% 56%, 38% 47%, 47% 56%, 56% 47%, 65% 56%, 74% 47%, 83% 56%, 92% 47%, 100% 55%, 100% 100%, 0 100%);
}
/* the cover egg without a photo is a real egg: the baby dino waits inside for the hatching */
[data-world="dino"] .dunia-fantasi-portrait--cover.no-photo .dunia-fantasi-portrait__mascot { display: none; }
[data-world="dino"] .dunia-fantasi-portrait__crest { display: none; }
[data-world="dino"] .dunia-fantasi-portrait__badge { right: -12%; bottom: 4%; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; width: 36%; aspect-ratio: .86; }
[data-world="dino"] .dunia-fantasi-portrait__hatch {
    position: absolute; z-index: 0; left: 6%; right: 6%; bottom: 14%; height: 74%; display: block; opacity: 0;
}
[data-world="dino"] .dunia-fantasi-portrait__hatch svg { width: 100%; height: 100%; }
[data-world="dino"] .dunia-fantasi-portrait__hatch span {
    position: absolute; right: -40%; top: -6%; padding: .2rem .7rem; opacity: 0;
    border: 2.5px solid var(--df-line); border-radius: 1rem 1rem 1rem .2rem; background: #fff; color: var(--df-line);
    font: 400 1.2rem/1.2 var(--df-display); letter-spacing: .04em;
}
html.inv-anim [data-world="dino"] .dunia-fantasi-portrait--cover .dunia-fantasi-portrait__frame { animation: dunia-fantasi-wiggle 3s ease-in-out 1.6s infinite; }

/* angkasa: a porthole with a metal ring and bolts, an orbit around it on the cover */
[data-world="angkasa"] .dunia-fantasi-portrait__frame {
    box-shadow: 0 0 0 8px #c7cfee, 0 0 0 10px var(--df-line), 0 0 30px 10px color-mix(in srgb, var(--inv-primary) 40%, transparent);
}
[data-world="angkasa"] .dunia-fantasi-portrait__frame::before {
    content: ''; position: absolute; inset: -8px; z-index: 2; border-radius: 50%; pointer-events: none;
    background: repeating-conic-gradient(from 8deg, #7d88b8 0 3.5deg, transparent 3.5deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent calc(100% - 7px), #000 calc(100% - 6px), #000 calc(100% - 2px), transparent calc(100% - 1px));
    mask: radial-gradient(circle, transparent calc(100% - 7px), #000 calc(100% - 6px), #000 calc(100% - 2px), transparent calc(100% - 1px));
}
[data-world="angkasa"] .dunia-fantasi-portrait__half { background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--inv-sky) 60%, #fff), var(--inv-sky) 70%); }
[data-world="angkasa"] .dunia-fantasi-portrait__half::after { box-shadow: inset 0 0 0 3px var(--df-line), inset 10px 12px 26px -10px rgb(255 255 255 / .45); }
[data-world="angkasa"] .dunia-fantasi-portrait__crest { left: auto; right: -18%; top: -6%; width: 36%; translate: none; rotate: 12deg; }
[data-world="angkasa"] .dunia-fantasi-portrait__badge { color: var(--inv-deep); text-shadow: none; box-shadow: 0 0 16px color-mix(in srgb, var(--inv-accent) 70%, transparent); }
[data-world="angkasa"] .dunia-fantasi-portrait__badge b { font-size: 1.3rem; }
[data-world="angkasa"] .dunia-fantasi-portrait--cover::before {
    content: ''; position: absolute; inset: -17%; border-radius: 50%;
    border: 2px dashed color-mix(in srgb, var(--inv-primary) 60%, transparent);
}
/* a little satellite on the orbit */
[data-world="angkasa"] .dunia-fantasi-portrait--cover::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: .8rem; height: .8rem; margin: -.4rem 0 0 -.4rem;
    border-radius: 50%; background: var(--inv-pop); box-shadow: 0 0 10px var(--inv-pop);
    transform: rotate(var(--df-orbit, 30deg)) translateY(calc(var(--df-pw) * -.67));
}
@keyframes dunia-fantasi-orbit { from { --df-orbit: 0deg; } to { --df-orbit: 360deg; } }
@property --df-orbit { syntax: '<angle>'; inherits: false; initial-value: 30deg; }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-portrait--cover::after { animation: dunia-fantasi-orbit 9s linear infinite; }

/* ---------- hero: the world's scene in layers ---------- */

.dunia-fantasi-hero {
    position: relative; min-height: min(100svh, 44rem); overflow: hidden;
    display: flex; flex-direction: column; align-items: center; padding: 4.4rem 1.2rem 0; text-align: center;
    background: linear-gradient(180deg, var(--inv-sky), color-mix(in srgb, var(--inv-pop) 22%, var(--inv-background)) 70%, var(--inv-background));
}
[data-world="dino"] .dunia-fantasi-hero { background: linear-gradient(180deg, var(--inv-sky), color-mix(in srgb, var(--inv-accent) 18%, var(--inv-background)) 70%, var(--inv-background)); }
[data-world="angkasa"] .dunia-fantasi-hero {
    background:
        radial-gradient(circle, rgb(255 255 255 / .85) 0 1px, transparent 1.6px) 0 0 / 60px 60px,
        radial-gradient(circle, rgb(255 255 255 / .5) 0 1px, transparent 1.4px) 25px 35px / 85px 85px,
        radial-gradient(ellipse 80% 45% at 50% 30%, color-mix(in srgb, var(--inv-sky) 70%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-deep), var(--inv-background));
}
.dunia-fantasi-hero__scene { position: absolute; inset: 0; pointer-events: none; }
.dunia-fantasi-hero__far { position: absolute; width: 8.5rem; aspect-ratio: 120 / 64; }
.dunia-fantasi-hero__far--a { left: -1.6rem; top: 3.2rem; }
.dunia-fantasi-hero__far--b { right: -2.4rem; top: 11rem; width: 7rem; }
.dunia-fantasi-hero__near { position: absolute; left: .4rem; bottom: 6.4rem; width: 4.2rem; aspect-ratio: 60 / 124; }
.dunia-fantasi-hero__mid { position: absolute; left: 50%; bottom: 3.4rem; width: min(78%, 21rem); aspect-ratio: 200 / 170; translate: -50% 0; }
.dunia-fantasi-hero__ground { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 6rem; }
.dunia-fantasi-hero__twinkle { position: absolute; width: 1.4rem; height: 1.4rem; }
.dunia-fantasi-hero__twinkle--a { left: 16%; top: 42%; }
.dunia-fantasi-hero__twinkle--b { right: 14%; top: 34%; width: 1rem; height: 1rem; }
.dunia-fantasi-hero__twinkle--c { right: 24%; top: 56%; width: 1.1rem; height: 1.1rem; }
[data-world="dino"] .dunia-fantasi-hero__far { aspect-ratio: 80 / 130; width: 4.4rem; }
[data-world="dino"] .dunia-fantasi-hero__far--a { left: -.6rem; top: auto; bottom: 5rem; rotate: 14deg; width: 5.4rem; }
[data-world="dino"] .dunia-fantasi-hero__far--b { right: -.4rem; top: auto; bottom: 5.6rem; rotate: -16deg; }
[data-world="dino"] .dunia-fantasi-hero__near { left: auto; right: -1.4rem; top: 2.6rem; bottom: auto; width: 6rem; aspect-ratio: 100 / 116; rotate: -140deg; }
[data-world="dino"] .dunia-fantasi-hero__twinkle { --df-trail: color-mix(in srgb, var(--df-rock) 60%, transparent); }
[data-world="angkasa"] .dunia-fantasi-hero__far { aspect-ratio: 120 / 80; }
[data-world="angkasa"] .dunia-fantasi-hero__far--a { top: 3.8rem; width: 9rem; }
[data-world="angkasa"] .dunia-fantasi-hero__far--b { top: 13rem; width: 5.5rem; opacity: .75; }
[data-world="angkasa"] .dunia-fantasi-hero__near { aspect-ratio: 1; width: 4rem; left: auto; right: 1rem; bottom: auto; top: 3.4rem; }

.dunia-fantasi-hero__content { position: relative; z-index: 2; display: grid; gap: .25rem; justify-items: center; }
.dunia-fantasi-hero__kicker {
    padding: .25rem .9rem; border-radius: 999px; border: 2.5px solid var(--df-line); background: var(--df-card); color: var(--df-ink);
    font: 700 .78rem/1.4 var(--df-text); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 3px 0 var(--df-line);
}
.dunia-fantasi-hero__name {
    margin-top: .3rem; font: 900 clamp(3rem, 15vw, 4rem)/1 var(--df-display); color: var(--inv-primary);
    text-shadow: 3px 4px 0 var(--inv-accent); overflow-wrap: anywhere;
}
.dunia-fantasi-hero__age { font: 700 1.05rem/1.4 var(--df-text); }
.dunia-fantasi-hero__age b {
    display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; margin-left: .2rem; padding: 0 .3rem;
    border: 2.5px solid var(--df-line); border-radius: 50%; background: var(--df-ring); color: #fff;
    font: 900 1.2rem/1 var(--df-display); text-shadow: 0 2px 0 var(--df-line);
}
.dunia-fantasi-hero__date { font: 700 1rem/1.4 var(--df-text); }
.dunia-fantasi-hero__cue {
    position: absolute; z-index: 3; left: 50%; bottom: 1.2rem; translate: -50% 0;
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .85rem; border-radius: 999px;
    background: var(--df-card); color: var(--df-ink); border: 2px solid var(--df-line); font: 700 .82rem/1.2 var(--df-text); white-space: nowrap;
}
.dunia-fantasi-hero__cue .dunia-fantasi-icon { rotate: 90deg; color: var(--inv-pop); }
[data-world="dino"] .dunia-fantasi-hero__name { font-weight: 400; letter-spacing: .03em; text-shadow: 3px 3px 0 var(--inv-accent), 4px 5px 0 var(--df-line); }
[data-world="dino"] .dunia-fantasi-hero__age b { font-weight: 400; }
[data-world="angkasa"] .dunia-fantasi-hero__kicker {
    background: color-mix(in srgb, var(--inv-deep) 70%, transparent); border: 1.5px solid var(--df-edge); color: var(--inv-primary);
    box-shadow: none; font-family: var(--df-mono); font-size: .66rem;
}
[data-world="angkasa"] .dunia-fantasi-hero__name {
    color: var(--inv-text); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; font-size: clamp(2.5rem, 12vw, 3.3rem);
    text-shadow: 0 0 22px color-mix(in srgb, var(--inv-primary) 80%, transparent), 0 3px 0 var(--df-line);
}
[data-world="angkasa"] .dunia-fantasi-hero__age b { color: var(--inv-deep); text-shadow: none; font-size: 1rem; }
[data-world="angkasa"] .dunia-fantasi-hero__cue { background: var(--inv-deep); border: 1.5px solid var(--df-edge); color: var(--inv-text); }
html.inv-anim .dunia-fantasi-hero__cue .dunia-fantasi-icon { animation: dunia-fantasi-bob 1.6s ease-in-out infinite; }
html.inv-anim .dunia-fantasi-hero__twinkle { animation: dunia-fantasi-twinkle 2.4s ease-in-out infinite; }
html.inv-anim .dunia-fantasi-hero__twinkle--b { animation-delay: -.8s; }
html.inv-anim .dunia-fantasi-hero__twinkle--c { animation-delay: -1.6s; }

/* the scene rises in once the cover is gone */
@keyframes dunia-fantasi-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
html.inv-anim .dunia-fantasi-hero:not(.is-open) :is(.dunia-fantasi-hero__scene, .dunia-fantasi-hero__content > *) { opacity: 0; }
html.inv-anim .dunia-fantasi-hero.is-open .dunia-fantasi-hero__scene { animation: dunia-fantasi-rise .8s cubic-bezier(.2, .8, .2, 1) .45s both; }
html.inv-anim .dunia-fantasi-hero.is-open .dunia-fantasi-hero__content > * { animation: dunia-fantasi-fade-up .5s ease-out both; animation-delay: calc(.7s + var(--i, 0) * .1s); }
.dunia-fantasi-hero__content > :nth-child(2) { --i: 1; }
.dunia-fantasi-hero__content > :nth-child(3) { --i: 2; }
.dunia-fantasi-hero__content > :nth-child(4) { --i: 3; }

/* parallax: while the hero scrolls away, the far layer lags most, the landmark less, the ground keeps pace */
@keyframes dunia-fantasi-par-far { to { translate: 0 11rem; } }
@keyframes dunia-fantasi-par-mid { to { translate: -50% 6rem; } }
@keyframes dunia-fantasi-par-near { to { translate: 0 3rem; } }
@keyframes dunia-fantasi-par-text { to { translate: 0 8rem; opacity: .1; } }
@supports (animation-timeline: view()) {
    .dunia-fantasi-hero { view-timeline: --dunia-fantasi-hero block; }
    html.inv-anim :is(.dunia-fantasi-hero__far, .dunia-fantasi-hero__mid, .dunia-fantasi-hero__near, .dunia-fantasi-hero__content) {
        animation-timing-function: linear; animation-fill-mode: both;
        animation-timeline: --dunia-fantasi-hero; animation-range: exit 0% exit 100%;
    }
    html.inv-anim .dunia-fantasi-hero__far { animation-name: dunia-fantasi-par-far; }
    html.inv-anim .dunia-fantasi-hero__mid { animation-name: dunia-fantasi-par-mid; }
    html.inv-anim .dunia-fantasi-hero__near { animation-name: dunia-fantasi-par-near; }
    html.inv-anim .dunia-fantasi-hero__content { animation-name: dunia-fantasi-par-text; }
}

/* ---------- sections, headings and the drifting side ornaments ---------- */

.dunia-fantasi-main { padding: 0 1.15rem; }
.dunia-fantasi-section { position: relative; padding: 3.6rem 0 .6rem; text-align: center; }
.dunia-fantasi-section > :not(.dunia-fantasi-decos) { position: relative; z-index: 1; }

.dunia-fantasi-decos { position: absolute; inset: 0 -1.15rem; z-index: 0; overflow: clip; pointer-events: none; }
.dunia-fantasi-deco { position: absolute; }
.dunia-fantasi-deco--far { left: -2.4rem; top: 1.6rem; width: 7rem; height: 4.2rem; opacity: .75; }
.dunia-fantasi-deco--near { right: -1.3rem; top: 46%; width: 3.4rem; height: 7rem; opacity: .85; }
.dunia-fantasi-main > section:nth-of-type(even) .dunia-fantasi-deco--far { left: auto; right: -2.4rem; }
.dunia-fantasi-main > section:nth-of-type(even) .dunia-fantasi-deco--near { right: auto; left: -1.3rem; scale: -1 1; }
[data-world="kastil"] .dunia-fantasi-deco--near { opacity: .5; }
[data-world="dino"] .dunia-fantasi-deco--far { width: 4.6rem; height: 7.5rem; left: -1.5rem; rotate: 16deg; opacity: .55; }
[data-world="dino"] .dunia-fantasi-main > section:nth-of-type(even) .dunia-fantasi-deco--far { right: -1.5rem; rotate: -16deg; }
[data-world="dino"] .dunia-fantasi-deco--near { width: 5rem; height: 5.8rem; right: -2.2rem; rotate: -60deg; opacity: .45; }
[data-world="dino"] .dunia-fantasi-main > section:nth-of-type(even) .dunia-fantasi-deco--near { left: -2.2rem; rotate: 60deg; }
[data-world="angkasa"] .dunia-fantasi-deco--far { width: 7.5rem; height: 5rem; opacity: .6; }
[data-world="angkasa"] .dunia-fantasi-deco--near { width: 3.6rem; height: 3.6rem; opacity: .7; }

/* parallax: far ornaments drift a little, near ones a lot (scroll-driven; still without support) */
@keyframes dunia-fantasi-drift-far { from { translate: 0 2.5rem; } to { translate: 0 -2.5rem; } }
@keyframes dunia-fantasi-drift-near { from { translate: 0 9rem; } to { translate: 0 -9rem; } }
@supports (animation-timeline: view()) {
    html.inv-anim .dunia-fantasi-deco { animation: dunia-fantasi-drift-far linear both; animation-timeline: view(); }
    html.inv-anim .dunia-fantasi-deco--near { animation-name: dunia-fantasi-drift-near; }
}

.dunia-fantasi-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.7rem; }
.dunia-fantasi-head__orn { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.dunia-fantasi-head__orn svg { width: 2.6rem; height: 2.1rem; }
.dunia-fantasi-head__orn::before, .dunia-fantasi-head__orn::after { content: ''; width: 2.4rem; border-top: 3px dotted color-mix(in srgb, var(--inv-text) 45%, transparent); }
.dunia-fantasi-head__kicker { font: 700 .78rem/1.3 var(--df-text); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-text) 85%, var(--inv-background)); }
.dunia-fantasi-head__title {
    margin-top: .15rem; font: 900 clamp(1.9rem, 8.4vw, 2.3rem)/1.12 var(--df-display); color: var(--inv-primary);
    text-shadow: var(--df-title-shadow); overflow-wrap: anywhere;
}
[data-world="dino"] .dunia-fantasi-head__title { color: var(--inv-text); letter-spacing: .03em; font-weight: 400; }
[data-world="angkasa"] .dunia-fantasi-head__title { color: var(--inv-text); font-weight: 700; font-size: clamp(1.45rem, 6.6vw, 1.8rem); letter-spacing: .06em; text-transform: uppercase; }
[data-world="angkasa"] .dunia-fantasi-head__kicker { color: var(--inv-primary); font-family: var(--df-mono); font-size: .66rem; letter-spacing: .2em; }
[data-world="angkasa"] .dunia-fantasi-head__orn::before, [data-world="angkasa"] .dunia-fantasi-head__orn::after { border-top: 2px dashed color-mix(in srgb, var(--inv-primary) 55%, transparent); }
@keyframes dunia-fantasi-slap { 0% { scale: 1.6; rotate: -20deg; } 60% { scale: .9; } 100% { scale: 1; rotate: 0deg; } }
html.inv-anim .dunia-fantasi-head.is-revealed .dunia-fantasi-head__orn svg { animation: dunia-fantasi-slap .55s cubic-bezier(.3, 1.4, .5, 1) .15s both; }

.dunia-fantasi-label { font: 800 .74rem/1.3 var(--df-text); letter-spacing: .14em; text-transform: uppercase; color: var(--df-muted); }
.dunia-fantasi-card { padding: 1.4rem 1.2rem; border: var(--df-border); border-radius: var(--df-radius); background: var(--df-card); color: var(--df-ink); box-shadow: var(--df-shadow); }

/* ---------- opening: proclamation / wooden sign / transmission ---------- */

.dunia-fantasi-opening { padding-top: 2.6rem; }
.dunia-fantasi-notice {
    position: relative; padding: 2.2rem 1.4rem 2rem; color: var(--df-ink);
    border: var(--df-border); border-radius: var(--df-radius); background: var(--df-card); box-shadow: var(--df-shadow);
}
.dunia-fantasi-notice__tag {
    display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .8rem; padding: .2rem .8rem; border-radius: 999px;
    background: var(--inv-primary); color: var(--df-on-primary); font: 800 .74rem/1.5 var(--df-text); letter-spacing: .14em; text-transform: uppercase;
}
.dunia-fantasi-notice__light { display: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--inv-pop); }
.dunia-fantasi-notice__greeting { font: 900 1.6rem/1.2 var(--df-display); color: var(--inv-primary); }
.dunia-fantasi-notice__text { margin-top: .7rem; font-size: 1.04rem; line-height: 1.7; }
.dunia-fantasi-notice__seal { display: block; width: 3rem; height: 2.5rem; margin: 1rem auto 0; }

/* kastil: a parchment scroll with rolled ends and a pink wax seal */
[data-world="kastil"] .dunia-fantasi-notice {
    margin: .9rem .4rem; border-radius: .4rem; box-shadow: 0 6px 0 var(--df-line);
    background: linear-gradient(90deg, rgb(0 0 0 / .05), transparent 12%, transparent 88%, rgb(0 0 0 / .05)), color-mix(in srgb, var(--inv-accent) 10%, #fffaf0);
}
[data-world="kastil"] .dunia-fantasi-notice::before, [data-world="kastil"] .dunia-fantasi-notice::after {
    content: ''; position: absolute; left: -1rem; right: -1rem; height: 1.5rem; border: 3px solid var(--df-line); border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, #fff), var(--inv-accent) 60%, color-mix(in srgb, var(--inv-accent) 70%, var(--df-line)));
}
[data-world="kastil"] .dunia-fantasi-notice::before { top: -.95rem; }
[data-world="kastil"] .dunia-fantasi-notice::after { bottom: -.95rem; }
[data-world="kastil"] .dunia-fantasi-notice__seal {
    width: 3.6rem; height: 3.6rem; padding: .7rem .55rem .55rem; border-radius: 50%; border: 3px solid var(--df-line);
    background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--inv-pop) 70%, #fff), var(--inv-pop) 70%); box-shadow: 0 3px 0 var(--df-line);
}

/* dino: a wooden sign on two posts */
[data-world="dino"] .dunia-fantasi-notice {
    margin-bottom: 2.2rem; color: #fff8e6; border-radius: .9rem;
    background:
        repeating-linear-gradient(180deg, transparent 0 2.4rem, rgb(0 0 0 / .16) 2.4rem calc(2.4rem + 2px)),
        repeating-linear-gradient(176deg, transparent 0 9px, rgb(0 0 0 / .05) 9px 11px),
        linear-gradient(180deg, color-mix(in srgb, var(--df-rock) 80%, var(--df-line)), color-mix(in srgb, var(--df-rock) 65%, var(--df-line)));
}
[data-world="dino"] .dunia-fantasi-notice::before, [data-world="dino"] .dunia-fantasi-notice::after {
    content: ''; position: absolute; z-index: -1; top: 70%; width: 1rem; height: calc(30% + 2.2rem); border: 3px solid var(--df-line);
    background: color-mix(in srgb, var(--df-rock) 70%, var(--df-line));
}
[data-world="dino"] .dunia-fantasi-notice::before { left: 18%; }
[data-world="dino"] .dunia-fantasi-notice::after { right: 18%; }
[data-world="dino"] .dunia-fantasi-notice__tag { background: var(--inv-accent); color: var(--df-line); border: 2px solid var(--df-line); }
[data-world="dino"] .dunia-fantasi-notice__greeting { color: #fff8e6; font-weight: 400; letter-spacing: .03em; text-shadow: 0 3px 0 var(--df-line); }
[data-world="dino"] .dunia-fantasi-notice__text { color: #fff8e6; text-shadow: 0 1px 0 rgb(0 0 0 / .35); }

/* angkasa: an incoming transmission on a screen with scan lines and a blinking light */
[data-world="angkasa"] .dunia-fantasi-notice {
    background:
        repeating-linear-gradient(180deg, transparent 0 3px, rgb(255 255 255 / .03) 3px 4px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-paper) 90%, var(--inv-primary)), var(--inv-paper));
}
[data-world="angkasa"] .dunia-fantasi-notice__tag { background: transparent; color: var(--inv-primary); border: 1.5px solid var(--df-edge); font-family: var(--df-mono); font-size: .62rem; }
[data-world="angkasa"] .dunia-fantasi-notice__light { display: inline-block; box-shadow: 0 0 8px var(--inv-pop); background: var(--inv-pop); }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-notice__light { animation: dunia-fantasi-blink 1.1s steps(2) infinite; }
[data-world="angkasa"] .dunia-fantasi-notice__greeting { color: var(--inv-text); font-size: 1.3rem; letter-spacing: .04em; }

/* ---------- celebrant: the portrait card ---------- */

.dunia-fantasi-profile {
    position: relative; margin-top: 4.2rem; padding: 0 1.2rem 1.6rem; color: var(--df-ink);
    border: var(--df-border); border-radius: var(--df-radius); background: var(--df-card); box-shadow: var(--df-shadow);
}
.dunia-fantasi-profile .dunia-fantasi-portrait { margin-top: -3.4rem; }
.dunia-fantasi-profile__title { margin-bottom: .45rem; }
.dunia-fantasi-profile__title span {
    display: inline-block; padding: .2rem 1.1rem; border: 2.5px solid var(--df-line); border-radius: .4rem;
    background: var(--inv-pop); color: #fff; font: 800 .95rem/1.35 var(--df-text); letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 3px 0 var(--df-line); text-shadow: 0 1px 0 rgb(0 0 0 / .25); rotate: -2deg;
}
.dunia-fantasi-profile__name { font: 900 1.55rem/1.2 var(--df-display); color: var(--inv-primary); overflow-wrap: anywhere; }
.dunia-fantasi-profile__nick { margin-top: .1rem; font: 700 .95rem/1.4 var(--df-text); color: var(--df-muted); }
.dunia-fantasi-profile__nick::before { content: '“'; }
.dunia-fantasi-profile__nick::after { content: '”'; }
.dunia-fantasi-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.dunia-fantasi-chips li {
    display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .75rem; border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--df-edge) 70%, transparent); background: var(--df-soft); font: 700 .86rem/1.4 var(--df-text);
}
.dunia-fantasi-chips .dunia-fantasi-icon { color: var(--inv-pop); }
.dunia-fantasi-plaque {
    margin-top: 1.2rem; padding: .9rem 1rem 1rem; border-radius: 1rem;
    background: color-mix(in srgb, var(--inv-accent) 18%, var(--df-card)); border: 2px dashed color-mix(in srgb, var(--df-edge) 60%, transparent);
}
.dunia-fantasi-plaque__label { font: 700 .8rem/1.3 var(--df-text); letter-spacing: .08em; color: var(--df-muted); }
.dunia-fantasi-plaque__names { display: grid; gap: .05rem; margin-top: .3rem; font: 800 1.12rem/1.35 var(--df-text); }
.dunia-fantasi-plaque__amp { font: 900 1rem/1.2 var(--df-display); color: var(--inv-pop); }
.dunia-fantasi-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: 1.1rem; }
.dunia-fantasi-chip-link {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .3rem 1rem;
    border: 2.5px solid var(--df-edge); border-radius: 999px; background: var(--df-card); color: var(--df-ink);
    box-shadow: var(--df-shadow-sm); font: 700 .9rem/1 var(--df-text); text-decoration: none;
}
.dunia-fantasi-chip-link:focus-visible { outline: 3px solid var(--inv-pop); outline-offset: 3px; }
[data-world="kastil"] .dunia-fantasi-profile { border-radius: 9rem 9rem var(--df-radius) var(--df-radius) / 6rem 6rem var(--df-radius) var(--df-radius); padding-top: .2rem; }
[data-world="dino"] .dunia-fantasi-profile {
    border-radius: 1.8rem 1.2rem 2rem 1.3rem / 1.3rem 1.9rem 1.2rem 1.8rem;
    background: radial-gradient(circle, color-mix(in srgb, var(--df-rock) 16%, transparent) 0 1.5px, transparent 2px) 0 0 / 18px 18px, var(--df-card);
}
[data-world="dino"] .dunia-fantasi-profile__name, [data-world="dino"] .dunia-fantasi-plaque__amp { font-weight: 400; letter-spacing: .03em; }
[data-world="dino"] .dunia-fantasi-profile__title span { background: var(--inv-accent); color: var(--df-line); text-shadow: none; }
[data-world="angkasa"] .dunia-fantasi-profile__name { color: var(--inv-text); font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
[data-world="angkasa"] .dunia-fantasi-profile__title span { background: var(--inv-accent); color: var(--inv-deep); border-color: var(--df-line); text-shadow: none; box-shadow: none; }
[data-world="angkasa"] .dunia-fantasi-plaque { background: color-mix(in srgb, var(--inv-deep) 60%, var(--inv-paper)); }
[data-world="angkasa"] .dunia-fantasi-plaque__amp { color: var(--inv-accent); }
[data-world="angkasa"] .dunia-fantasi-chips .dunia-fantasi-icon { color: var(--inv-pop); }

/* ---------- message: the mascot's speech bubble ---------- */

.dunia-fantasi-bubble { margin: 0; }
.dunia-fantasi-bubble__text {
    position: relative; margin: 0; padding: 1.8rem 1.3rem 1.5rem; color: var(--df-ink);
    border: var(--df-border); border-radius: 2rem; background: var(--df-card); box-shadow: var(--df-shadow);
    font: 600 1.08rem/1.65 var(--df-text);
}
.dunia-fantasi-bubble__text::before { content: '“'; position: absolute; left: .9rem; top: -.3rem; font: 900 3.4rem/1 var(--df-display); color: var(--inv-pop); }
.dunia-fantasi-bubble__text::after {
    content: ''; position: absolute; left: 2.6rem; bottom: -1.5rem; width: 1.9rem; height: 1.6rem;
    background: var(--df-edge); clip-path: polygon(0 0, 100% 0, 15% 100%);
}
.dunia-fantasi-bubble__text p::after {
    content: ''; position: absolute; left: calc(2.6rem + 3.5px); bottom: -1.02rem; width: 1.4rem; height: 1.15rem;
    background: var(--df-card); clip-path: polygon(0 0, 100% 0, 15% 100%);
}
.dunia-fantasi-bubble__from { display: flex; align-items: center; gap: .6rem; margin: 1.5rem 0 0 1.2rem; font: 800 1.05rem/1.3 var(--df-text); text-align: left; }
.dunia-fantasi-bubble__avatar {
    display: grid; place-items: center; width: 3.6rem; height: 3.6rem; flex: none; padding: .3rem;
    border: 3px solid var(--df-edge); border-radius: 50%; background: var(--df-soft); box-shadow: var(--df-shadow-sm);
}
.dunia-fantasi-bubble__avatar svg { width: 100%; height: 100%; }
html.inv-anim .dunia-fantasi-bubble.is-revealed .dunia-fantasi-bubble__avatar svg { animation: dunia-fantasi-wiggle 2.4s ease-in-out .6s infinite; }
[data-world="dino"] .dunia-fantasi-bubble__text { border-radius: 2.2rem 1.6rem 2.4rem 1.5rem / 1.6rem 2.3rem 1.5rem 2.1rem; background: color-mix(in srgb, var(--inv-ground) 18%, var(--df-card)); }
[data-world="dino"] .dunia-fantasi-bubble__text p::after { background: color-mix(in srgb, var(--inv-ground) 18%, var(--df-card)); }
[data-world="angkasa"] .dunia-fantasi-bubble__text { border-radius: 1.2rem 1.2rem 1.2rem .3rem; }
[data-world="angkasa"] .dunia-fantasi-bubble__text::before { color: var(--inv-primary); font-family: var(--df-text); }

/* ---------- events: banners / fossil cards / mission cards ---------- */

.dunia-fantasi-events__list { display: grid; }
.dunia-fantasi-event-wrap { position: relative; margin-top: 1rem; }
.dunia-fantasi-event {
    position: relative; overflow: hidden; padding: 2.1rem 1.2rem 1.3rem; color: var(--df-ink); text-align: left;
    border: var(--df-border); border-radius: var(--df-radius); background: var(--df-card); box-shadow: var(--df-shadow);
}
.dunia-fantasi-event__mark { position: absolute; right: -.6rem; top: -.4rem; width: 5.5rem; height: 5.5rem; opacity: .14; pointer-events: none; }
.dunia-fantasi-event__tag {
    position: absolute; left: 1rem; top: .75rem; padding: .05rem .75rem; border-radius: 999px;
    background: var(--inv-primary); color: var(--df-on-primary); font: 800 .74rem/1.6 var(--df-text); letter-spacing: .12em; text-transform: uppercase;
}
.dunia-fantasi-event__photo { display: block; width: 100%; aspect-ratio: 16 / 9; margin: .5rem 0 .9rem; object-fit: cover; border: 3px solid var(--df-edge); border-radius: calc(var(--df-radius) * .7); }
.dunia-fantasi-event__name { margin-top: .4rem; font: 900 1.55rem/1.15 var(--df-display); color: var(--inv-primary); overflow-wrap: anywhere; }
.dunia-fantasi-facts { display: grid; gap: .6rem; margin: .9rem 0 0; padding: 0; list-style: none; font-size: .98rem; line-height: 1.45; }
.dunia-fantasi-facts li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.dunia-fantasi-facts .dunia-fantasi-icon {
    width: 2rem; height: 2rem; padding: .32rem; border: 2px solid var(--df-edge); border-radius: 50%; background: var(--inv-accent); color: var(--df-line);
}
.dunia-fantasi-facts li > span { padding-top: .2rem; }
.dunia-fantasi-facts strong { display: block; font-weight: 800; }
.dunia-fantasi-facts__sub { display: block; color: var(--df-muted); font-size: .92rem; }
.dunia-fantasi-event .inv-maps { margin-top: 1.1rem; }
.dunia-fantasi-event .inv-maps .inv-button { width: 100%; }
.dunia-fantasi-event__rod, .dunia-fantasi-event__tail { display: none; }

/* the trail between two cards: little prints walking down */
.dunia-fantasi-trail { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .7rem 0 .2rem; }
.dunia-fantasi-trail svg { width: 1.35rem; height: 1.35rem; opacity: .7; }
.dunia-fantasi-trail svg:nth-child(odd) { translate: -.8rem 0; rotate: -12deg; }
.dunia-fantasi-trail svg:nth-child(even) { translate: .8rem 0; rotate: 12deg; }
@keyframes dunia-fantasi-step { from { opacity: 0; scale: .3; } to { opacity: .7; scale: 1; } }
html.inv-anim .dunia-fantasi-trail.is-revealed svg { animation: dunia-fantasi-step .3s ease-out both; }
html.inv-anim .dunia-fantasi-trail.is-revealed svg:nth-child(2) { animation-delay: .2s; }
html.inv-anim .dunia-fantasi-trail.is-revealed svg:nth-child(3) { animation-delay: .4s; }
html.inv-anim .dunia-fantasi-trail.is-revealed svg:nth-child(4) { animation-delay: .6s; }

/* kastil: a royal banner hanging from a gold rod, with a swallowtail end */
[data-world="kastil"] .dunia-fantasi-event-wrap { margin-top: 1.6rem; padding-bottom: 2.2rem; }
[data-world="kastil"] .dunia-fantasi-event__rod {
    display: block; position: relative; z-index: 2; height: .85rem; margin: 0 -.5rem -.45rem; border: 3px solid var(--df-line); border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 55%, #fff), var(--inv-accent));
}
[data-world="kastil"] .dunia-fantasi-event__rod::before, [data-world="kastil"] .dunia-fantasi-event__rod::after {
    content: ''; position: absolute; top: 50%; width: 1.25rem; height: 1.25rem; margin-top: -.62rem; border: 3px solid var(--df-line); border-radius: 50%; background: var(--inv-pop);
}
[data-world="kastil"] .dunia-fantasi-event__rod::before { left: -.8rem; }
[data-world="kastil"] .dunia-fantasi-event__rod::after { right: -.8rem; }
[data-world="kastil"] .dunia-fantasi-event {
    border-radius: .3rem .3rem 0 0; border-bottom: 0; box-shadow: none; padding-top: 2.4rem;
    background: linear-gradient(90deg, var(--inv-primary) 0 .55rem, transparent .55rem calc(100% - .55rem), var(--inv-primary) calc(100% - .55rem)), var(--df-card);
}
[data-world="kastil"] .dunia-fantasi-event__tail {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2.6rem;
    background: var(--df-line); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 38%, 0 100%);
}
[data-world="kastil"] .dunia-fantasi-event__tail::before {
    content: ''; position: absolute; inset: 0 3px 4px; background: var(--df-card);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3px), 50% 30%, 0 calc(100% - 3px));
}
[data-world="kastil"] .dunia-fantasi-event__tag { left: 50%; translate: -50% 0; top: .9rem; background: var(--inv-accent); color: var(--df-line); border: 2px solid var(--df-line); }
[data-world="kastil"] .dunia-fantasi-event__name, [data-world="kastil"] .dunia-fantasi-event .dunia-fantasi-facts { padding-inline: .5rem; }
[data-world="kastil"] .dunia-fantasi-event .inv-maps { padding-inline: .5rem; }
html.inv-anim [data-world="kastil"] .dunia-fantasi-event-wrap.is-revealed .dunia-fantasi-event { transform-origin: 50% 0; animation: dunia-fantasi-banner 1.6s ease-out .3s both; }
@keyframes dunia-fantasi-banner { 0% { rotate: 0deg; } 25% { rotate: 1.6deg; } 55% { rotate: -1deg; } 80% { rotate: .4deg; } 100% { rotate: 0deg; } }

/* dino: a fossil card of sandstone with cracks and a footprint pressed into it */
[data-world="dino"] .dunia-fantasi-event {
    border-radius: 1.6rem 1.1rem 1.8rem 1.2rem / 1.2rem 1.7rem 1.1rem 1.6rem;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M0 40l18-6 10 8 16-12 8 6' fill='none' stroke='%233b2915' stroke-opacity='.18' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 9rem auto no-repeat,
        radial-gradient(circle, color-mix(in srgb, var(--df-rock) 30%, transparent) 0 1.5px, transparent 2px) 0 0 / 16px 16px,
        radial-gradient(circle, color-mix(in srgb, var(--df-rock) 22%, transparent) 0 1px, transparent 1.5px) 7px 9px / 11px 11px,
        color-mix(in srgb, var(--df-rock) 18%, var(--df-card));
}
[data-world="dino"] .dunia-fantasi-event__mark { --df-trail: var(--df-line); opacity: .16; width: 6.5rem; height: 6.5rem; right: -.4rem; top: -.2rem; rotate: 160deg; }
[data-world="dino"] .dunia-fantasi-event__tag { background: var(--inv-accent); color: var(--df-line); border: 2px solid var(--df-line); font-family: var(--df-display); font-weight: 400; font-size: .92rem; letter-spacing: .06em; }
[data-world="dino"] .dunia-fantasi-event__name { font-weight: 400; letter-spacing: .03em; color: var(--inv-text); }
[data-world="dino"] .dunia-fantasi-trail svg { --df-trail: color-mix(in srgb, var(--df-rock) 80%, var(--df-line)); rotate: 180deg; width: 1.6rem; height: 1.6rem; }
[data-world="dino"] .dunia-fantasi-trail svg:nth-child(odd) { rotate: 168deg; }
[data-world="dino"] .dunia-fantasi-trail svg:nth-child(even) { rotate: 192deg; }

/* angkasa: a mission card with HUD corner brackets */
[data-world="angkasa"] .dunia-fantasi-event {
    background:
        linear-gradient(var(--inv-primary), var(--inv-primary)) 8px 8px / 18px 2px no-repeat,
        linear-gradient(var(--inv-primary), var(--inv-primary)) 8px 8px / 2px 18px no-repeat,
        linear-gradient(var(--inv-primary), var(--inv-primary)) calc(100% - 8px) 8px / 18px 2px no-repeat,
        linear-gradient(var(--inv-primary), var(--inv-primary)) calc(100% - 8px) 8px / 2px 18px no-repeat,
        linear-gradient(var(--inv-primary), var(--inv-primary)) 8px calc(100% - 8px) / 18px 2px no-repeat,
        linear-gradient(var(--inv-primary), var(--inv-primary)) 8px calc(100% - 8px) / 2px 18px no-repeat,
        linear-gradient(var(--inv-primary), var(--inv-primary)) calc(100% - 8px) calc(100% - 8px) / 18px 2px no-repeat,
        linear-gradient(var(--inv-primary), var(--inv-primary)) calc(100% - 8px) calc(100% - 8px) / 2px 18px no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-primary) 7%, transparent) 1px, transparent 1px) 0 0 / 100% 22px,
        var(--df-card);
}
[data-world="angkasa"] .dunia-fantasi-event__tag { background: transparent; color: var(--inv-primary); border: 1.5px solid var(--df-edge); font-family: var(--df-mono); font-size: .64rem; top: 1rem; left: 1.4rem; }
[data-world="angkasa"] .dunia-fantasi-event__name { color: var(--inv-text); font-size: 1.15rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-top: .6rem; }
[data-world="angkasa"] .dunia-fantasi-event__mark { opacity: .25; }
[data-world="angkasa"] .dunia-fantasi-facts .dunia-fantasi-icon { background: transparent; color: var(--inv-primary); border-color: var(--df-edge); }
[data-world="angkasa"] .dunia-fantasi-trail svg { filter: drop-shadow(0 0 4px var(--inv-pop)); }

/* ---------- countdown: tower clock / volcano / T-minus ---------- */

.dunia-fantasi-count { position: relative; }
.dunia-fantasi-count__art { position: relative; z-index: 1; display: block; width: min(82%, 17rem); margin: 0 auto -3px; overflow: visible; }
.dunia-fantasi-count__body {
    position: relative; padding: 1.1rem .7rem 1.2rem; color: var(--df-ink);
    border: var(--df-border); border-radius: var(--df-radius); background: var(--df-card); box-shadow: var(--df-shadow);
}
.dunia-fantasi-count__label { margin-bottom: .8rem; font: 800 .8rem/1.3 var(--df-text); letter-spacing: .16em; text-transform: uppercase; color: var(--df-muted); }
.dunia-fantasi-count .inv-countdown { gap: .5rem; }
.dunia-fantasi-count .inv-countdown__item { display: grid; place-content: center; flex: 1 1 0; min-width: 0; max-width: 4.8rem; padding: .7rem .2rem .55rem; }
.dunia-fantasi-count .inv-countdown__value { font: 900 1.65rem/1 var(--df-display); }
.dunia-fantasi-count .inv-countdown__label { margin-top: .25rem; font: 800 .62rem/1 var(--df-text); letter-spacing: .1em; text-transform: uppercase; opacity: 1; }
.dunia-fantasi-count .inv-countdown__done { padding: .4rem .6rem; font-weight: 700; }
.dunia-fantasi-count .inv-countdown__actions { gap: .7rem; margin-top: 1.3rem; padding: 0 .3rem; }
.dunia-fantasi-count .inv-countdown__actions .inv-button { flex: 1 1 13rem; font-size: .9rem; }

/* kastil: the castle wall with crenellations, the numbers in arched windows, the tower and its clock on top */
[data-world="kastil"] .dunia-fantasi-count__body {
    border-radius: .3rem .3rem var(--df-radius) var(--df-radius); margin-top: 1rem;
    background:
        linear-gradient(color-mix(in srgb, var(--inv-sky) 55%, transparent) 2px, transparent 2px) 0 0 / 100% 1.6rem,
        linear-gradient(90deg, color-mix(in srgb, var(--inv-sky) 55%, transparent) 2px, transparent 2px) 0 0 / 3.2rem 3.2rem,
        var(--df-card);
}
[data-world="kastil"] .dunia-fantasi-count__body::before {
    content: ''; position: absolute; left: -3px; right: -3px; top: -1.25rem; height: 1.25rem;
    background: repeating-linear-gradient(90deg, var(--df-line) 0 3px, var(--df-card) 3px calc(2.2rem - 3px), var(--df-line) calc(2.2rem - 3px) 2.2rem, transparent 2.2rem 3.6rem);
    border-top: 3px solid var(--df-line);
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 2.2rem, transparent 2.2rem 3.6rem); mask: repeating-linear-gradient(90deg, #000 0 2.2rem, transparent 2.2rem 3.6rem);
}
[data-world="kastil"] .dunia-fantasi-count__art { margin-bottom: -1.3rem; }
[data-world="kastil"] .dunia-fantasi-count .inv-countdown__item {
    border: 3px solid var(--df-line); border-radius: 999px 999px .5rem .5rem; padding-top: 1rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 85%, #fff), var(--inv-primary)); color: #fff;
}
[data-world="kastil"] .dunia-fantasi-count .inv-countdown__value { text-shadow: 0 2px 0 var(--df-line); }
.dunia-fantasi-clock__hour, .dunia-fantasi-clock__min { transform-box: view-box; transform-origin: 100px 98px; }
html.inv-anim .dunia-fantasi-clock__min { animation: dunia-fantasi-spin 6s linear infinite; }
html.inv-anim .dunia-fantasi-clock__hour { animation: dunia-fantasi-spin 72s linear infinite; }
html.inv-anim .dunia-fantasi-flag { transform-box: fill-box; transform-origin: 0 50%; animation: dunia-fantasi-flap 1.2s ease-in-out infinite; }
@keyframes dunia-fantasi-flap { 0%, 100% { transform: scaleX(1) skewY(0deg); } 50% { transform: scaleX(.8) skewY(6deg); } }
html.inv-anim .dunia-fantasi-twinkles path { transform-box: fill-box; transform-origin: center; animation: dunia-fantasi-twinkle 2s ease-in-out infinite; }
html.inv-anim .dunia-fantasi-twinkles path:nth-child(2) { animation-delay: -.7s; }
html.inv-anim .dunia-fantasi-twinkles path:nth-child(3) { animation-delay: -1.4s; }

/* dino: the volcano over a band of earth, the numbers on boulders */
[data-world="dino"] .dunia-fantasi-count__body {
    border-radius: 1.4rem; padding-top: 1.4rem;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--df-line) 14%, transparent) 0 1.5px, transparent 2px) 0 0 / 15px 15px,
        color-mix(in srgb, var(--inv-ground) 45%, var(--df-card));
}
[data-world="dino"] .dunia-fantasi-count__label { color: var(--df-line); }
[data-world="dino"] .dunia-fantasi-count .inv-countdown__item {
    border: 3px solid var(--df-line); box-shadow: 0 4px 0 var(--df-line);
    border-radius: 46% 54% 42% 58% / 55% 48% 52% 45%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--df-rock) 25%, #fff), color-mix(in srgb, var(--df-rock) 55%, var(--df-card)));
}
[data-world="dino"] .dunia-fantasi-count .inv-countdown__item:nth-child(2) { border-radius: 55% 45% 58% 42% / 46% 56% 44% 54%; }
[data-world="dino"] .dunia-fantasi-count .inv-countdown__item:nth-child(3) { border-radius: 42% 58% 48% 52% / 58% 44% 56% 42%; }
[data-world="dino"] .dunia-fantasi-count .inv-countdown__value { font-weight: 400; letter-spacing: .03em; }
@keyframes dunia-fantasi-puff { 0% { transform: translateY(8px) scale(.6); opacity: 0; } 30% { opacity: .95; } 100% { transform: translateY(-22px) scale(1.25); opacity: 0; } }
html.inv-anim .dunia-fantasi-smoke__puff { transform-box: fill-box; transform-origin: center; animation: dunia-fantasi-puff 2.7s ease-out infinite; }
html.inv-anim .dunia-fantasi-smoke__puff:nth-child(2) { animation-delay: -.9s; }
html.inv-anim .dunia-fantasi-smoke__puff:nth-child(3) { animation-delay: -1.8s; }
@keyframes dunia-fantasi-glow { 50% { filter: brightness(1.25) drop-shadow(0 0 6px var(--inv-accent)); } }
html.inv-anim .dunia-fantasi-lava { animation: dunia-fantasi-glow 1.6s ease-in-out infinite; }

/* angkasa: mission control, "T-minus" in mono digits on glowing cells, separated by colons */
[data-world="angkasa"] .dunia-fantasi-count__body {
    background:
        repeating-linear-gradient(180deg, transparent 0 3px, rgb(255 255 255 / .025) 3px 4px),
        var(--inv-deep);
}
[data-world="angkasa"] .dunia-fantasi-count__label {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    font: 800 1.15rem/1.2 var(--df-mono); letter-spacing: .24em; color: var(--inv-accent);
    text-shadow: 0 0 12px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
[data-world="angkasa"] .dunia-fantasi-count__label::before { content: ''; width: .6rem; height: .6rem; border-radius: 50%; background: var(--inv-pop); box-shadow: 0 0 8px var(--inv-pop); }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-count__label::before { animation: dunia-fantasi-blink 1s steps(2) infinite; }
[data-world="angkasa"] .dunia-fantasi-count .inv-countdown { gap: .9rem; }
[data-world="angkasa"] .dunia-fantasi-count .inv-countdown__item {
    position: relative; border: 1.5px solid var(--df-edge); border-radius: .6rem; background: #060b22;
    box-shadow: inset 0 0 14px -4px color-mix(in srgb, var(--inv-primary) 70%, transparent);
}
[data-world="angkasa"] .dunia-fantasi-count .inv-countdown__item:not(:last-child)::after {
    content: ':'; position: absolute; right: -.68rem; top: 50%; translate: 0 -62%;
    font: 700 1.3rem/1 var(--df-mono); color: var(--inv-primary);
}
[data-world="angkasa"] .dunia-fantasi-count .inv-countdown__value {
    font: 700 1.45rem/1 var(--df-mono); color: var(--inv-primary); font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
[data-world="angkasa"] .dunia-fantasi-count .inv-countdown__label { font-family: var(--df-mono); font-size: .52rem; color: var(--inv-text); }
[data-world="angkasa"] .dunia-fantasi-count__art { width: min(64%, 13rem); margin-bottom: .2rem; }
.dunia-fantasi-radar__sweep { transform-box: view-box; transform-origin: 160px 34px; }
html.inv-anim .dunia-fantasi-radar__sweep { animation: dunia-fantasi-spin 2.6s linear infinite; }
html.inv-anim .dunia-fantasi-lights circle { animation: dunia-fantasi-blink 1.2s steps(2) infinite; }
html.inv-anim .dunia-fantasi-lights circle:nth-child(2) { animation-delay: -.4s; }
html.inv-anim .dunia-fantasi-lights circle:nth-child(3) { animation-delay: -.8s; }

.dunia-fantasi-calendar.inv-cal {
    --inv-cal-bg: var(--df-card); --inv-cal-text: var(--df-ink); --inv-cal-mark: var(--inv-pop);
    margin-top: 2rem; border: var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow);
}
.dunia-fantasi-calendar .inv-cal__month { font: 900 1.5rem/1.1 var(--df-display); color: var(--inv-primary); }
.dunia-fantasi-calendar .inv-cal__dow { opacity: .85; }
[data-world="dino"] .dunia-fantasi-calendar .inv-cal__month { font-weight: 400; letter-spacing: .03em; color: var(--inv-text); }
[data-world="angkasa"] .dunia-fantasi-calendar .inv-cal__month { font-size: 1.1rem; font-weight: 700; color: var(--inv-text); letter-spacing: .08em; text-transform: uppercase; }
[data-world="angkasa"] .dunia-fantasi-calendar.inv-cal { --inv-cal-mark: var(--inv-accent); }

/* ---------- party: theme & dress code ---------- */

.dunia-fantasi-party__card { display: grid; gap: 1.1rem; }
.dunia-fantasi-party__theme-name { margin-top: .15rem; font: 900 1.7rem/1.15 var(--df-display); color: var(--inv-primary); overflow-wrap: anywhere; }
.dunia-fantasi-party__dress { display: flex; align-items: center; justify-content: center; gap: .7rem; text-align: left; }
.dunia-fantasi-party__dress > .dunia-fantasi-icon {
    width: 2.7rem; height: 2.7rem; padding: .5rem; border: 2.5px solid var(--df-edge); border-radius: 50%; background: var(--inv-accent); color: var(--df-line);
}
.dunia-fantasi-party__dress-text { font: 800 1.08rem/1.35 var(--df-text); }
.dunia-fantasi-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin: 0; padding: .2rem 0; list-style: none; }
.dunia-fantasi-swatch { position: relative; width: 2.6rem; height: 2.6rem; border: 3px solid var(--df-line); border-radius: 50%; background: var(--dunia-fantasi-swatch); box-shadow: 0 3px 0 var(--df-line); }
.dunia-fantasi-swatch::before { content: ''; position: absolute; left: 18%; top: 14%; width: 26%; height: 22%; border-radius: 50%; background: rgb(255 255 255 / .7); }
.dunia-fantasi-party__note {
    display: flex; gap: .55rem; align-items: flex-start; padding: .8rem .9rem; border-radius: .9rem; text-align: left;
    background: var(--df-soft); font-size: .98rem; line-height: 1.55;
}
.dunia-fantasi-party__note .dunia-fantasi-icon { margin-top: .2rem; color: var(--inv-pop); }
.dunia-fantasi-party__hashtag {
    display: inline-block; margin-top: 1.4rem; padding: .35rem 1.1rem; border: 3px solid var(--df-line); border-radius: .7rem;
    background: var(--inv-pop); color: #fff; box-shadow: 0 4px 0 var(--df-line); rotate: -3deg;
    font: 900 1.2rem/1.2 var(--df-display); text-shadow: 0 2px 0 rgb(0 0 0 / .25); overflow-wrap: anywhere;
}
/* kastil: the colors as cut gems */
[data-world="kastil"] .dunia-fantasi-swatch { width: 2.3rem; height: 2.3rem; margin: .2rem; border-radius: .35rem; rotate: 45deg; }
[data-world="kastil"] .dunia-fantasi-swatch::before { left: 14%; top: 14%; width: 30%; height: 30%; border-radius: 2px; }
/* dino: the colors as speckled eggs */
[data-world="dino"] .dunia-fantasi-swatch { width: 2.3rem; height: 2.9rem; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
[data-world="dino"] .dunia-fantasi-swatch::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(circle at 65% 55%, rgb(0 0 0 / .12) 0 8%, transparent 9%), radial-gradient(circle at 35% 75%, rgb(0 0 0 / .1) 0 7%, transparent 8%);
}
[data-world="dino"] .dunia-fantasi-party__theme-name { font-weight: 400; letter-spacing: .03em; color: var(--inv-text); }
[data-world="dino"] .dunia-fantasi-party__hashtag { font-weight: 400; letter-spacing: .04em; background: var(--inv-accent); color: var(--df-line); text-shadow: none; }
/* angkasa: the colors as little planets with a ring */
[data-world="angkasa"] .dunia-fantasi-swatch { box-shadow: 0 0 12px -2px var(--dunia-fantasi-swatch); border-color: var(--df-line); }
[data-world="angkasa"] .dunia-fantasi-swatch::after {
    content: ''; position: absolute; left: -45%; right: -45%; top: 50%; height: .7rem; margin-top: -.35rem; border-radius: 50%;
    border: 2px solid var(--inv-accent); rotate: -20deg; clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
[data-world="angkasa"] .dunia-fantasi-swatches { gap: 1.5rem; }
[data-world="angkasa"] .dunia-fantasi-party__theme-name { color: var(--inv-text); font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
[data-world="angkasa"] .dunia-fantasi-party__hashtag { background: var(--inv-accent); color: var(--inv-deep); text-shadow: none; font-size: 1rem; letter-spacing: .04em; box-shadow: 0 0 18px -2px color-mix(in srgb, var(--inv-accent) 70%, transparent); }

/* ---------- rundown: carpet / stepping stones / orbit ---------- */

.dunia-fantasi-steps { position: relative; display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.dunia-fantasi-steps::before {
    content: ''; position: absolute; left: 2.35rem; top: .5rem; bottom: .5rem; width: .9rem; margin-left: -.45rem; border-radius: 999px;
    background: var(--inv-pop); border: 2.5px solid var(--df-line); transform-origin: 50% 0;
}
.dunia-fantasi-step { position: relative; display: grid; grid-template-columns: 4.7rem minmax(0, 1fr); gap: .8rem; align-items: center; }
.dunia-fantasi-step__time {
    position: relative; z-index: 1; display: grid; place-items: center; height: 3.1rem;
    border: 3px solid var(--df-line); border-radius: .7rem; background: var(--inv-accent); color: var(--df-line); box-shadow: 0 4px 0 var(--df-line);
    font: 900 1.05rem/1 var(--df-display); letter-spacing: .02em;
}
.dunia-fantasi-step__body {
    padding: .75rem 1rem; border: var(--df-border); border-radius: calc(var(--df-radius) * .8); background: var(--df-card); color: var(--df-ink); box-shadow: var(--df-shadow-sm);
}
.dunia-fantasi-step__body h3 { font: 800 1.05rem/1.35 var(--df-text); }
.dunia-fantasi-step__body p { margin-top: .1rem; font-size: .92rem; line-height: 1.45; color: var(--df-muted); }
@keyframes dunia-fantasi-grow { from { scale: 1 0; } to { scale: 1 1; } }
@supports (animation-timeline: view()) {
    html.inv-anim .dunia-fantasi-steps::before { animation: dunia-fantasi-grow linear both; animation-timeline: view(); animation-range: entry 30% cover 60%; }
}
/* kastil: a red carpet with gold edges, the times on shields */
[data-world="kastil"] .dunia-fantasi-steps::before { background: linear-gradient(90deg, var(--inv-accent) 0 22%, var(--inv-pop) 22% 78%, var(--inv-accent) 78%); }
[data-world="kastil"] .dunia-fantasi-step__time { border-radius: .7rem .7rem 50% 50% / .7rem .7rem 38% 38%; height: 3.4rem; padding-bottom: .3rem; }
/* dino: a dotted path of pebbles, the times on boulders */
[data-world="dino"] .dunia-fantasi-steps::before { width: .5rem; margin-left: -.25rem; border: 0; background: radial-gradient(circle, color-mix(in srgb, var(--df-rock) 80%, var(--df-line)) 0 45%, transparent 50%) 50% 0 / .5rem 1rem; }
[data-world="dino"] .dunia-fantasi-step__time {
    border-radius: 46% 54% 42% 58% / 55% 48% 52% 45%; font-weight: 400; letter-spacing: .04em;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--df-rock) 25%, #fff), color-mix(in srgb, var(--df-rock) 60%, var(--df-card)));
}
[data-world="dino"] .dunia-fantasi-step:nth-child(even) .dunia-fantasi-step__time { border-radius: 55% 45% 58% 42% / 46% 56% 44% 54%; }
[data-world="dino"] .dunia-fantasi-step__body { border-radius: 1.2rem .9rem 1.3rem 1rem / 1rem 1.3rem .9rem 1.2rem; }
/* angkasa: a glowing orbit line with mono capsules */
[data-world="angkasa"] .dunia-fantasi-steps::before { width: 2px; margin-left: -1px; border: 0; background: linear-gradient(var(--inv-primary), color-mix(in srgb, var(--inv-primary) 20%, transparent)); box-shadow: 0 0 8px var(--inv-primary); }
[data-world="angkasa"] .dunia-fantasi-step__time {
    height: 2.4rem; border: 1.5px solid var(--df-edge); border-radius: 999px; background: #060b22; color: var(--inv-primary); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--inv-primary) 70%, transparent);
    font: 700 .86rem/1 var(--df-mono); letter-spacing: .04em;
}

/* ---------- story: storybook / earth layers / captain's log ---------- */

.dunia-fantasi-chapters { display: grid; gap: 1.4rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.dunia-fantasi-chapter {
    position: relative; padding: 1.2rem 1.2rem 1.3rem; color: var(--df-ink);
    border: var(--df-border); border-radius: var(--df-radius); background: var(--df-card); box-shadow: var(--df-shadow);
}
.dunia-fantasi-chapter__tag { display: flex; align-items: center; gap: .5rem; font: 800 .76rem/1.4 var(--df-text); letter-spacing: .12em; text-transform: uppercase; color: var(--df-muted); }
.dunia-fantasi-chapter__tag b { padding: .05rem .6rem; border-radius: 999px; background: var(--inv-primary); color: var(--df-on-primary); letter-spacing: .06em; }
.dunia-fantasi-chapter__photo { display: block; width: 100%; aspect-ratio: 4 / 3; margin-top: .8rem; object-fit: cover; border: 3px solid var(--df-edge); border-radius: calc(var(--df-radius) * .7); }
.dunia-fantasi-chapter__title { margin-top: .6rem; font: 900 1.3rem/1.2 var(--df-display); color: var(--inv-primary); }
.dunia-fantasi-chapter__text { margin-top: .35rem; font-size: .98rem; line-height: 1.6; }
/* kastil: pages of a storybook with a ribbon bookmark and a big first letter */
[data-world="kastil"] .dunia-fantasi-chapter {
    border-radius: .4rem 1.2rem 1.2rem .4rem; padding-left: 1.6rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--df-line) 14%, transparent), transparent .9rem), color-mix(in srgb, var(--inv-accent) 8%, #fffaf0);
}
[data-world="kastil"] .dunia-fantasi-chapter::after {
    content: ''; position: absolute; right: 1.2rem; top: -3px; width: 1.1rem; height: 2.6rem;
    background: var(--inv-pop); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);
}
[data-world="kastil"] .dunia-fantasi-chapter__text::first-letter { float: left; margin: .1rem .35rem 0 0; font: 900 2.4rem/.9 var(--df-display); color: var(--inv-primary); }
/* dino: layers of earth, each deeper one darker, with pebbles and a fossil tag */
[data-world="dino"] .dunia-fantasi-chapters { gap: 0; margin-inline: -1.15rem; border-top: 3px solid var(--df-line); }
[data-world="dino"] .dunia-fantasi-chapters::before {
    content: ''; position: absolute; left: 0; right: 0; top: -1.1rem; height: 1rem;
    background: radial-gradient(circle at 50% 100%, var(--inv-ground) 0 60%, transparent 62%) 0 0 / 1.4rem 1rem repeat-x;
}
[data-world="dino"] .dunia-fantasi-chapter {
    border: 0; border-bottom: 3px dashed color-mix(in srgb, var(--df-line) 35%, transparent); border-radius: 0; box-shadow: none; padding: 1.4rem 1.6rem 1.5rem;
    background:
        radial-gradient(ellipse 1rem .6rem, color-mix(in srgb, var(--df-rock) 70%, transparent) 0 60%, transparent 65%) 85% 30% / 9rem 6rem,
        radial-gradient(circle, color-mix(in srgb, var(--df-line) 14%, transparent) 0 1.5px, transparent 2px) 0 0 / 14px 14px,
        color-mix(in srgb, var(--df-rock) var(--df-depth, 18%), var(--inv-paper));
}
[data-world="dino"] .dunia-fantasi-chapter:nth-child(2) { --df-depth: 30%; }
[data-world="dino"] .dunia-fantasi-chapter:nth-child(3) { --df-depth: 40%; }
[data-world="dino"] .dunia-fantasi-chapter:nth-child(n + 4) { --df-depth: 48%; }
[data-world="dino"] .dunia-fantasi-chapter__tag { color: var(--df-line); }
[data-world="dino"] .dunia-fantasi-chapter__tag b { background: var(--inv-accent); color: var(--df-line); }
[data-world="dino"] .dunia-fantasi-chapter__title { font-weight: 400; letter-spacing: .03em; color: var(--df-line); }
[data-world="dino"] .dunia-fantasi-chapter__photo { rotate: -1.5deg; border-color: var(--df-line); box-shadow: 0 4px 0 var(--df-line); }
/* angkasa: log entries on a glowing line */
[data-world="angkasa"] .dunia-fantasi-chapters { padding-left: 1.2rem; }
[data-world="angkasa"] .dunia-fantasi-chapters::before { content: ''; position: absolute; left: .3rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--inv-primary); box-shadow: 0 0 8px var(--inv-primary); }
[data-world="angkasa"] .dunia-fantasi-chapter::before {
    content: ''; position: absolute; left: -1.25rem; top: 1.4rem; width: .8rem; height: .8rem; border-radius: 50%;
    background: var(--inv-pop); box-shadow: 0 0 0 3px var(--inv-background), 0 0 12px var(--inv-pop);
}
[data-world="angkasa"] .dunia-fantasi-chapter__tag { font-family: var(--df-mono); font-size: .62rem; color: var(--inv-primary); }
[data-world="angkasa"] .dunia-fantasi-chapter__tag b { background: transparent; color: var(--inv-accent); border: 1.5px solid currentColor; }
[data-world="angkasa"] .dunia-fantasi-chapter__title { color: var(--inv-text); font-size: 1.02rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- gallery ---------- */

.dunia-fantasi-album .inv-gallery { gap: 1rem .85rem; padding: .4rem .2rem; }
.dunia-fantasi-album .inv-gallery__item { overflow: hidden; border: 3px solid var(--df-edge); border-radius: calc(var(--df-radius) * .7); box-shadow: var(--df-shadow-sm); }
.dunia-fantasi-album .inv-gallery__item:focus-visible { outline: 3px solid var(--inv-pop); outline-offset: 4px; }
[data-world="kastil"] .dunia-fantasi-album .inv-gallery__item {
    border: 6px solid var(--inv-accent); border-radius: .4rem; box-shadow: 0 0 0 2.5px var(--df-line), inset 0 0 0 2px var(--df-line), 0 6px 0 2.5px var(--df-line);
}
[data-world="kastil"] .dunia-fantasi-album .inv-gallery__item:nth-child(4n + 1), [data-world="kastil"] .dunia-fantasi-album .inv-gallery__item:nth-child(4n) { border-radius: 50% 50% .4rem .4rem / 26% 26% .4rem .4rem; }
[data-world="dino"] .dunia-fantasi-album .inv-gallery__item { overflow: visible; border: 6px solid #fff; border-radius: .25rem; box-shadow: 0 0 0 2.5px var(--df-line), 0 5px 0 2.5px var(--df-line); }
[data-world="dino"] .dunia-fantasi-album .inv-gallery__item:nth-child(odd) { rotate: -2deg; }
[data-world="dino"] .dunia-fantasi-album .inv-gallery__item:nth-child(even) { rotate: 2deg; }
[data-world="dino"] .dunia-fantasi-album .inv-gallery__item::after {
    content: ''; position: absolute; left: 50%; top: -.8rem; width: 3.4rem; height: 1.2rem; margin-left: -1.7rem; rotate: -5deg;
    background: color-mix(in srgb, var(--inv-ground) 75%, transparent); border: 1.5px dashed color-mix(in srgb, var(--df-line) 35%, transparent);
}
[data-world="angkasa"] .dunia-fantasi-album .inv-gallery__item { border-width: 1.5px; box-shadow: 0 0 16px -4px color-mix(in srgb, var(--inv-primary) 80%, transparent); }
[data-world="angkasa"] .dunia-fantasi-album .inv-gallery__item:nth-child(3n + 1) { border-radius: 50%; }

/* ---------- live streaming: a screen ---------- */

.dunia-fantasi-screen {
    display: grid; gap: .6rem; justify-items: center; padding: 1.5rem 1.2rem; color: #fff;
    border: var(--df-border); border-radius: var(--df-radius); box-shadow: var(--df-shadow);
    background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / .14), transparent 60%), var(--inv-deep);
    font-size: .98rem; line-height: 1.5;
}
.dunia-fantasi-screen__live {
    display: inline-flex; align-items: center; gap: .4rem; padding: .1rem .7rem; border-radius: 999px;
    background: #d2342a; color: #fff; font: 800 .78rem/1.6 var(--df-text); letter-spacing: .16em; text-transform: uppercase;
}
.dunia-fantasi-screen__live span { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; }
html.inv-anim .dunia-fantasi-screen__live span { animation: dunia-fantasi-blink 1.2s steps(2) infinite; }
.dunia-fantasi-screen__note { color: var(--inv-accent); font-weight: 700; }
[data-world="kastil"] .dunia-fantasi-screen { border-radius: 50% 50% 1.2rem 1.2rem / 22% 22% 1.2rem 1.2rem; padding-top: 2.4rem; box-shadow: 0 0 0 6px var(--inv-accent), 0 0 0 9px var(--df-line), 0 9px 0 9px var(--df-line); border: 0; }
[data-world="dino"] .dunia-fantasi-screen { background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / .12), transparent 60%), var(--inv-deep); border-radius: 1.4rem; outline: .5rem solid color-mix(in srgb, var(--df-rock) 75%, var(--df-line)); outline-offset: 0; }

/* ---------- forms (RSVP card and wishes board) ---------- */

.dunia-fantasi-body .inv-form { gap: .95rem; }
.dunia-fantasi-body .inv-form label, .dunia-fantasi-body .inv-form__choices legend {
    gap: .35rem; font: 800 .78rem/1.3 var(--df-text); letter-spacing: .1em; text-transform: uppercase; color: var(--df-ink);
}
.dunia-fantasi-body .inv-form input:not([type=radio]):not([type=checkbox]),
.dunia-fantasi-body .inv-form select,
.dunia-fantasi-body .inv-form textarea {
    min-height: 3rem; padding: .7rem .9rem;
    border: 2.5px solid color-mix(in srgb, var(--df-edge) 55%, transparent); border-radius: .85rem;
    background: #fff; color: #2a1d3d;
    font: 600 1rem/1.4 var(--df-text); letter-spacing: 0; text-transform: none;
}
.dunia-fantasi-body .inv-form select {
    appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
    background:
        linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 1.15rem) 52% / .45rem .45rem no-repeat,
        linear-gradient(-45deg, transparent 50%, currentColor 50%) calc(100% - .8rem) 52% / .45rem .45rem no-repeat,
        #fff;
}
.dunia-fantasi-body .inv-form :is(input, select, textarea):focus-visible { outline: 3px solid var(--inv-pop); outline-offset: 2px; border-color: var(--df-edge); }
.dunia-fantasi-body[data-world="angkasa"] .inv-form input:not([type=radio]):not([type=checkbox]),
.dunia-fantasi-body[data-world="angkasa"] .inv-form select,
.dunia-fantasi-body[data-world="angkasa"] .inv-form textarea { background-color: #070d28; color: var(--inv-text); border-color: color-mix(in srgb, var(--inv-primary) 55%, transparent); }
.dunia-fantasi-body[data-world="angkasa"] .inv-form select { background-image: linear-gradient(45deg, transparent 50%, var(--inv-text) 50%), linear-gradient(-45deg, transparent 50%, var(--inv-text) 50%); }
.dunia-fantasi-body[data-world="angkasa"] .inv-form label, .dunia-fantasi-body[data-world="angkasa"] .inv-form__choices legend { color: var(--inv-primary); font-family: var(--df-mono); font-size: .62rem; letter-spacing: .16em; }

/* attendance: big toggle cards (the radio dots are hidden but stay focusable) */
.dunia-fantasi-body .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.dunia-fantasi-body .inv-form__choices legend { grid-column: 1 / -1; float: left; width: 100%; margin-bottom: .45rem; padding: 0; }
.dunia-fantasi-body .inv-form__choices label {
    position: relative; display: grid; place-items: center; min-height: 3.4rem; padding: .45rem .3rem;
    border: 3px solid var(--df-edge); border-radius: 1rem; background: var(--df-card); color: var(--df-ink); box-shadow: var(--df-shadow-sm);
    font: 800 .95rem/1.2 var(--df-text); letter-spacing: 0; text-transform: none; text-align: center; cursor: pointer;
    transition: translate .12s ease, box-shadow .12s ease, background-color .2s ease;
}
.dunia-fantasi-body .inv-form__choices input[type=radio] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dunia-fantasi-body .inv-form__choices label:has(input:checked) { translate: 0 3px; background: var(--inv-accent); color: var(--df-on-accent); box-shadow: 0 1px 0 var(--df-edge); }
.dunia-fantasi-body .inv-form__choices label:has(input:checked)::before {
    content: ''; position: absolute; top: -.6rem; right: -.45rem; width: 1.45rem; height: 1.45rem;
    border: 2.5px solid var(--df-line); border-radius: 50%;
    background: var(--inv-pop) 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;
}
.dunia-fantasi-body .inv-form__choices label:has(input:focus-visible) { outline: 3px solid var(--inv-pop); outline-offset: 3px; }
.dunia-fantasi-body[data-world="angkasa"] .inv-form__choices label { font-family: var(--df-text); font-size: .9rem; color: var(--inv-text); background: #070d28; }
.dunia-fantasi-body[data-world="angkasa"] .inv-form__choices label:has(input:checked) { color: var(--inv-deep); box-shadow: 0 0 18px -2px color-mix(in srgb, var(--inv-accent) 70%, transparent); }
.dunia-fantasi-body .inv-form button[type=submit] { width: 100%; margin-top: .3rem; font-size: 1.05rem; }
.dunia-fantasi-body .inv-form__notice {
    padding: .8rem .9rem; border: 2.5px solid var(--df-edge); border-radius: .85rem;
    background: color-mix(in srgb, var(--inv-accent) 22%, var(--df-card)); color: var(--df-ink); font-size: .94rem; line-height: 1.5;
}
.dunia-fantasi-body .inv-form__error { border: 2.5px solid #a12a1f; border-radius: .85rem; }

/* ---------- RSVP: royal scroll / explorer card / mission panel ---------- */

.dunia-fantasi-form-card {
    position: relative; padding: 1.3rem 1.15rem 1.4rem; text-align: left; color: var(--df-ink);
    border: var(--df-border); border-radius: var(--df-radius); background: var(--df-card); box-shadow: var(--df-shadow);
}
.dunia-fantasi-form-card__roll { display: none; }
.dunia-fantasi-form-card__head { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; font: 900 1.1rem/1.2 var(--df-display); color: var(--inv-primary); }
.dunia-fantasi-form-card__head svg { width: 2.2rem; height: 1.8rem; flex: none; }
.dunia-fantasi-form-card__head i { display: none; }
.dunia-fantasi-form-card__intro { margin-bottom: 1rem; font-size: .98rem; line-height: 1.5; }
.dunia-fantasi-rsvp .inv-rsvp__deadline {
    display: inline-block; margin-bottom: .9rem; padding: .25rem .7rem; border: 2px dashed color-mix(in srgb, var(--df-edge) 70%, transparent); border-radius: .6rem;
    font: 700 .86rem/1.4 var(--df-text);
}
.dunia-fantasi-rsvp .inv-rsvp__done .inv-button { width: 100%; }

/* kastil: a royal scroll with gold rolls at both ends */
[data-world="kastil"] .dunia-fantasi-form-card {
    margin: 1rem .4rem; border-radius: .3rem; padding-block: 1.9rem;
    background: linear-gradient(90deg, rgb(0 0 0 / .05), transparent 10%, transparent 90%, rgb(0 0 0 / .05)), color-mix(in srgb, var(--inv-accent) 10%, #fffaf0);
}
[data-world="kastil"] .dunia-fantasi-form-card__roll {
    display: block; position: absolute; left: -1rem; right: -1rem; height: 1.6rem; border: 3px solid var(--df-line); border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, #fff), var(--inv-accent) 60%, color-mix(in srgb, var(--inv-accent) 70%, var(--df-line)));
}
[data-world="kastil"] .dunia-fantasi-form-card__roll--top { top: -1rem; }
[data-world="kastil"] .dunia-fantasi-form-card__roll--bottom { bottom: -1rem; }
[data-world="kastil"] .dunia-fantasi-form-card__head { justify-content: center; }
[data-world="kastil"] .dunia-fantasi-form-card__intro { text-align: center; }
/* dino: an explorer card with a scaly header band */
[data-world="dino"] .dunia-fantasi-form-card { padding-top: 0; overflow: hidden; }
[data-world="dino"] .dunia-fantasi-form-card__head {
    margin: 0 -1.15rem 1rem; padding: .8rem 1.15rem; border-bottom: 3px solid var(--df-line); color: #fff;
    background: radial-gradient(circle at 50% 100%, color-mix(in srgb, #fff 18%, transparent) 0 40%, transparent 42%) 0 0 / 1.2rem 1rem, var(--inv-primary);
    font-weight: 400; letter-spacing: .04em; text-shadow: 0 2px 0 var(--df-line);
}
/* angkasa: a mission panel with status lights */
[data-world="angkasa"] .dunia-fantasi-form-card { background: repeating-linear-gradient(180deg, transparent 0 3px, rgb(255 255 255 / .02) 3px 4px), var(--inv-deep); }
[data-world="angkasa"] .dunia-fantasi-form-card__head { font: 700 .66rem/1.2 var(--df-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--inv-primary); padding-bottom: .7rem; border-bottom: 1.5px dashed color-mix(in srgb, var(--inv-primary) 45%, transparent); }
[data-world="angkasa"] .dunia-fantasi-form-card__head span { flex: 1; }
[data-world="angkasa"] .dunia-fantasi-form-card__head i { display: block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--inv-accent); box-shadow: 0 0 8px currentColor; color: var(--inv-accent); }
[data-world="angkasa"] .dunia-fantasi-form-card__head i:nth-of-type(2) { background: var(--inv-primary); color: var(--inv-primary); }
[data-world="angkasa"] .dunia-fantasi-form-card__head i:nth-of-type(3) { background: var(--inv-pop); color: var(--inv-pop); }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-form-card__head i { animation: dunia-fantasi-blink 1.4s steps(2) infinite; }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-form-card__head i:nth-of-type(2) { animation-delay: -.5s; }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-form-card__head i:nth-of-type(3) { animation-delay: -1s; }

/* ---------- the moment after sending ---------- */

.dunia-fantasi-moment { position: relative; margin: 0 0 1rem; text-align: center; }
.dunia-fantasi-moment__scene { position: relative; height: 9.5rem; }
.dunia-fantasi-moment__text { margin-top: .4rem; font: 900 1.25rem/1.3 var(--df-display); color: var(--inv-primary); }
[data-world="dino"] .dunia-fantasi-moment__text { font-weight: 400; letter-spacing: .03em; color: var(--df-line); }
[data-world="angkasa"] .dunia-fantasi-moment__text { font-size: .95rem; font-weight: 700; letter-spacing: .05em; color: var(--inv-accent); text-transform: uppercase; }

/* kastil: fireworks over the castle */
[data-world="kastil"] .dunia-fantasi-moment__hero { position: absolute; left: 50%; bottom: 0; width: 9.5rem; height: 8rem; translate: -50% 0; }
.dunia-fantasi-firework {
    position: absolute; width: 5rem; aspect-ratio: 1; border-radius: 50%; opacity: 0;
    background: repeating-conic-gradient(from 0deg, var(--df-fw, var(--inv-pop)) 0 5deg, transparent 5deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 28%, #000 30% 66%, transparent 70%); mask: radial-gradient(circle, transparent 0 28%, #000 30% 66%, transparent 70%);
}
.dunia-fantasi-firework--a { left: 6%; top: 0; }
.dunia-fantasi-firework--b { right: 8%; top: -.6rem; --df-fw: var(--inv-accent); width: 4.2rem; }
.dunia-fantasi-firework--c { left: 38%; top: -1.6rem; --df-fw: var(--inv-primary); width: 3.6rem; }
@keyframes dunia-fantasi-firework { 0% { opacity: 1; scale: .1; } 60% { opacity: 1; } 100% { opacity: 0; scale: 1.15; } }
html.inv-anim .dunia-fantasi-moment.is-on .dunia-fantasi-firework { animation: dunia-fantasi-firework 1.3s ease-out infinite; }
html.inv-anim .dunia-fantasi-moment.is-on .dunia-fantasi-firework--b { animation-delay: .45s; }
html.inv-anim .dunia-fantasi-moment.is-on .dunia-fantasi-firework--c { animation-delay: .85s; }
html:not(.inv-anim) .dunia-fantasi-firework { opacity: 1; }

/* dino: the baby dino stomps in, leaving footprints, and roars */
[data-world="dino"] .dunia-fantasi-moment__hero { position: absolute; left: 50%; bottom: 0; width: 7rem; height: 7rem; margin-left: -3.5rem; }
.dunia-fantasi-moment__print { position: absolute; bottom: .3rem; width: 1.3rem; height: 1.3rem; --df-trail: color-mix(in srgb, var(--df-rock) 80%, var(--df-line)); rotate: -90deg; }
.dunia-fantasi-moment__print--a { right: 4%; }
.dunia-fantasi-moment__print--b { right: 14%; bottom: 1rem; }
.dunia-fantasi-moment__print--c { right: 24%; }
.dunia-fantasi-roar {
    position: absolute; left: calc(50% + 2rem); top: .2rem; padding: .25rem .8rem; border: 3px solid var(--df-line); border-radius: 1rem 1rem 1rem .2rem;
    background: var(--inv-accent); color: var(--df-line); box-shadow: 0 3px 0 var(--df-line);
    font: 400 1.35rem/1.1 var(--df-display); letter-spacing: .06em; rotate: 6deg;
}
@keyframes dunia-fantasi-stomp {
    0% { translate: 12rem 0; } 20% { translate: 9rem -1rem; } 25% { translate: 8rem 0; } 45% { translate: 5rem -1rem; } 50% { translate: 4rem 0; }
    70% { translate: 1rem -1rem; } 75% { translate: 0 0; } 85% { scale: 1.08 .92; } 100% { translate: 0 0; scale: 1; }
}
@keyframes dunia-fantasi-shake { 0%, 100% { translate: 0 0; } 25% { translate: -3px 2px; } 50% { translate: 3px -1px; } 75% { translate: -2px -2px; } }
html.inv-anim [data-world="dino"] .dunia-fantasi-moment.is-on .dunia-fantasi-moment__hero { animation: dunia-fantasi-stomp 1.2s ease-out both; }
html.inv-anim .dunia-fantasi-moment.is-on .dunia-fantasi-moment__print { animation: dunia-fantasi-step .2s ease-out both; }
html.inv-anim .dunia-fantasi-moment.is-on .dunia-fantasi-moment__print--a { animation-delay: .3s; }
html.inv-anim .dunia-fantasi-moment.is-on .dunia-fantasi-moment__print--b { animation-delay: .6s; }
html.inv-anim .dunia-fantasi-moment.is-on .dunia-fantasi-moment__print--c { animation-delay: .9s; }
html.inv-anim .dunia-fantasi-moment.is-on .dunia-fantasi-roar { animation: dunia-fantasi-pop-in .4s cubic-bezier(.3, 1.6, .5, 1) 1.2s both; }
html.inv-anim [data-world="dino"] .dunia-fantasi-form-card.is-done { animation: dunia-fantasi-shake .12s linear .3s 8; }

/* angkasa: the rocket lifts off the pad and leaves the screen */
.dunia-fantasi-moment__pad { position: absolute; left: 50%; bottom: 0; width: 7rem; height: .6rem; margin-left: -3.5rem; border-radius: 999px; background: color-mix(in srgb, var(--inv-ground) 50%, #9aa3d6); }
.dunia-fantasi-moment__smoke {
    position: absolute; left: 50%; bottom: -.4rem; width: 9rem; height: 3rem; margin-left: -4.5rem; border-radius: 50%; opacity: 0;
    background: radial-gradient(ellipse, rgb(255 255 255 / .85), rgb(255 255 255 / 0) 70%);
}
[data-world="angkasa"] .dunia-fantasi-moment__hero { position: absolute; left: 50%; bottom: .5rem; z-index: 5; width: 3.6rem; height: 6.6rem; margin-left: -1.8rem; }
[data-world="angkasa"] .dunia-fantasi-moment__hero svg { width: 100%; height: 100%; }
.dunia-fantasi-moment__flame {
    position: absolute; left: 30%; right: 30%; top: 92%; height: 2.6rem; border-radius: 0 0 50% 50% / 0 0 100% 100%;
    background: linear-gradient(180deg, #fff, var(--inv-pop) 35%, var(--inv-accent) 70%, transparent); transform-origin: 50% 0;
}
@keyframes dunia-fantasi-flicker { 50% { scale: .85 .7; } }
@keyframes dunia-fantasi-liftoff { 0%, 25% { translate: 0 0; } 30% { translate: -1px 1px; } 35% { translate: 1px 0; } 100% { translate: 0 -150vh; } }
@keyframes dunia-fantasi-smoke { 0% { opacity: 0; scale: .3; } 30% { opacity: 1; } 100% { opacity: 0; scale: 1.4; } }
html.inv-anim .dunia-fantasi-moment__flame { animation: dunia-fantasi-flicker .12s linear infinite; }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-moment.is-on .dunia-fantasi-moment__hero { animation: dunia-fantasi-liftoff 2s cubic-bezier(.6, 0, .9, .5) both; }
html.inv-anim .dunia-fantasi-moment.is-on .dunia-fantasi-moment__smoke { animation: dunia-fantasi-smoke 1.6s ease-out .4s both; }

/* ---------- wishes: guest book / stone tablet / transmissions ---------- */

.dunia-fantasi-board {
    position: relative; padding: 1.2rem 1rem; text-align: left; color: var(--df-ink);
    border: var(--df-border); border-radius: var(--df-radius); background: var(--df-soft); box-shadow: var(--df-shadow);
}
.dunia-fantasi-board .inv-form { padding: 1.1rem 1rem; border: 2.5px solid color-mix(in srgb, var(--df-edge) 60%, transparent); border-radius: 1rem; background: var(--df-card); }
.dunia-fantasi-wishes .inv-wishes__list { --inv-wishes-height: 23rem; gap: .9rem; margin-top: 1.3rem; padding: .4rem .3rem .4rem 0; }
.dunia-fantasi-wishes .inv-wish {
    position: relative; padding: .85rem .95rem .75rem; border: 2.5px solid var(--df-edge); border-radius: 1rem;
    background: var(--df-card); color: var(--df-ink); box-shadow: var(--df-shadow-sm);
}
.dunia-fantasi-wishes .inv-wish__name { font: 800 1rem/1.3 var(--df-text); color: var(--inv-primary); }
.dunia-fantasi-wishes .inv-wish__message { font-size: .95rem; line-height: 1.5; }
.dunia-fantasi-wishes .inv-wish__time { opacity: 1; color: var(--df-muted); }
.dunia-fantasi-wishes .inv-wish__reply { border-left-color: var(--inv-pop); background: var(--df-soft); }
.dunia-fantasi-wishes .inv-wishes__empty { padding: .7rem .9rem; border-radius: .8rem; background: var(--df-card); opacity: 1; font-weight: 700; }
.dunia-fantasi-board__sticker {
    position: absolute; z-index: 3; right: .7rem; top: -1.2rem; padding: .3rem .85rem;
    border: 3px solid var(--df-line); border-radius: .7rem; background: var(--inv-accent); color: var(--df-line); box-shadow: 0 4px 0 var(--df-line);
    font: 900 1.05rem/1.1 var(--df-display); rotate: 6deg;
}
html.inv-anim .dunia-fantasi-board__sticker { animation: dunia-fantasi-pop-in .45s cubic-bezier(.3, 1.5, .5, 1) both; }
[data-world="kastil"] .dunia-fantasi-board { background: color-mix(in srgb, var(--inv-accent) 12%, #fffaf0); box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--inv-accent) 12%, #fffaf0), inset 0 0 0 7px var(--inv-accent), var(--df-shadow); }
[data-world="kastil"] .dunia-fantasi-wishes .inv-wish { border-left: 6px solid var(--inv-pop); }
[data-world="dino"] .dunia-fantasi-board {
    border-radius: 1.8rem 1.3rem 2rem 1.4rem / 1.4rem 2rem 1.3rem 1.8rem;
    background: radial-gradient(circle, color-mix(in srgb, var(--df-line) 14%, transparent) 0 1.5px, transparent 2px) 0 0 / 15px 15px, color-mix(in srgb, var(--df-rock) 35%, var(--df-card));
}
[data-world="dino"] .dunia-fantasi-wishes .inv-wish { border-radius: 1.4rem .4rem 1.4rem .4rem; background: color-mix(in srgb, var(--inv-ground) 22%, var(--df-card)); }
[data-world="dino"] .dunia-fantasi-wishes .inv-wish:nth-child(even) { border-radius: .4rem 1.4rem .4rem 1.4rem; background: color-mix(in srgb, var(--inv-accent) 18%, var(--df-card)); }
[data-world="dino"] .dunia-fantasi-wishes .inv-wish__name { color: var(--df-line); }
[data-world="dino"] .dunia-fantasi-board__sticker { font-weight: 400; }
[data-world="angkasa"] .dunia-fantasi-board { background: var(--inv-deep); }
[data-world="angkasa"] .dunia-fantasi-board .inv-form { background: transparent; }
[data-world="angkasa"] .dunia-fantasi-wishes .inv-wish { border-width: 1.5px; border-radius: 1rem 1rem 1rem .25rem; }
[data-world="angkasa"] .dunia-fantasi-wishes .inv-wish__name { font: 700 .74rem/1.4 var(--df-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--inv-primary); }
[data-world="angkasa"] .dunia-fantasi-board__sticker { font-size: .8rem; color: var(--inv-deep); }

/* ---------- gift ---------- */

.dunia-fantasi-gift__art { display: block; width: min(52%, 11rem); margin: -.4rem auto .8rem; overflow: visible; }
.dunia-fantasi-gift__intro { margin-bottom: 1.4rem; font-size: 1rem; }
.dunia-fantasi-gift__lid { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes dunia-fantasi-lid { 0%, 30% { transform: none; } 55% { transform: translateY(-18px) rotate(-8deg); } 75% { transform: translateY(-6px) rotate(3deg); } 100% { transform: translateY(-10px); } }
@keyframes dunia-fantasi-egg-rock { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(0deg); } }
@keyframes dunia-fantasi-pod { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(6px) rotate(4deg); } }
html.inv-anim [data-world="kastil"] .dunia-fantasi-gift__art.is-revealed .dunia-fantasi-gift__lid { animation: dunia-fantasi-lid 1.1s ease-out .2s both; }
html.inv-anim [data-world="kastil"] .dunia-fantasi-gift__art.is-revealed .dunia-fantasi-gift__glow path { transform-box: fill-box; transform-origin: center; animation: dunia-fantasi-twinkle 1.8s ease-in-out infinite; }
html.inv-anim [data-world="dino"] .dunia-fantasi-gift__lid { animation: dunia-fantasi-egg-rock 2.4s ease-in-out infinite; }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-gift__lid { transform-origin: 50% 0; animation: dunia-fantasi-pod 4s ease-in-out infinite; }
.dunia-fantasi-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .75rem; }
.dunia-fantasi-gift .inv-gift__account {
    position: relative; display: grid; justify-items: center; align-content: start; gap: .3rem; margin: 0; padding: 1.5rem .7rem .9rem;
    border: var(--df-border); border-radius: var(--df-radius); background: var(--df-card); color: var(--df-ink); box-shadow: var(--df-shadow-sm);
    text-align: center; overflow-wrap: anywhere;
}
.dunia-fantasi-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
.dunia-fantasi-gift .inv-gift__accounts .inv-gift__account::before {
    content: ''; position: absolute; left: 50%; top: -.9rem; width: 1.7rem; height: 1.7rem; margin-left: -.85rem;
    border: 3px solid var(--df-line); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8d8, var(--inv-accent) 60%);
}
[data-world="kastil"] .dunia-fantasi-gift .inv-gift__accounts .inv-gift__account::before { border-radius: .3rem; rotate: 45deg; width: 1.4rem; height: 1.4rem; margin-left: -.7rem; top: -.75rem; background: var(--inv-pop); }
[data-world="dino"] .dunia-fantasi-gift .inv-gift__accounts .inv-gift__account::before { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; height: 2rem; top: -1.1rem; background: radial-gradient(circle at 60% 60%, var(--inv-accent) 0 12%, transparent 14%), var(--inv-paper); }
[data-world="angkasa"] .dunia-fantasi-gift .inv-gift__accounts .inv-gift__account::before { border: 0; background: var(--inv-pop); box-shadow: 0 0 12px var(--inv-pop); width: 1rem; height: 1rem; margin-left: -.5rem; top: -.5rem; }
.dunia-fantasi-gift .inv-gift__bank { font: 800 .95rem/1.3 var(--df-text); }
.dunia-fantasi-gift .inv-gift__logo { border: 2px solid var(--df-line); box-shadow: none; }
.dunia-fantasi-gift .inv-gift__number { font: 900 1.08rem/1.25 var(--df-display); letter-spacing: .03em; }
[data-world="dino"] .dunia-fantasi-gift .inv-gift__number { font-weight: 400; }
[data-world="angkasa"] .dunia-fantasi-gift .inv-gift__number { font-size: .9rem; font-weight: 700; }
.dunia-fantasi-gift .inv-gift__holder { font-size: .86rem; line-height: 1.4; }
.dunia-fantasi-gift .inv-gift__account .inv-button { width: 100%; min-height: 2.75rem; margin-top: .35rem; padding: .45rem .5rem; font-size: .88rem; }
.dunia-fantasi-gift .inv-gift__address { margin-top: 1.3rem; padding: 1.2rem 1rem 1rem; border-style: dashed; background: var(--df-soft); font-size: .95rem; line-height: 1.5; }
.dunia-fantasi-gift .inv-gift__address .inv-gift__bank {
    padding: .1rem .75rem; border-radius: 999px; background: var(--inv-primary); color: var(--df-on-primary);
    font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
}
.dunia-fantasi-gift .inv-gift__address .inv-button { width: auto; min-width: 12rem; }

/* ---------- wishlist: gift tags ---------- */

.dunia-fantasi-wishlist__intro { margin-bottom: 1.6rem; font-size: 1rem; }
.dunia-fantasi-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem .8rem; }
.dunia-fantasi-tag {
    position: relative; display: grid; justify-items: center; align-content: start; gap: .3rem; padding: 1.5rem .7rem 1rem;
    border: var(--df-border); border-radius: 1rem 1rem var(--df-radius) var(--df-radius); background: var(--df-card); color: var(--df-ink); box-shadow: var(--df-shadow-sm);
    clip-path: none;
}
.dunia-fantasi-tag:nth-child(odd) { rotate: -1.5deg; }
.dunia-fantasi-tag:nth-child(even) { rotate: 1.5deg; }
.dunia-fantasi-tag:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .4rem); }
.dunia-fantasi-tag__hole { position: absolute; left: 50%; top: .5rem; width: .8rem; height: .8rem; margin-left: -.4rem; border: 2.5px solid var(--df-line); border-radius: 50%; background: var(--inv-background); }
.dunia-fantasi-tag__hole::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 1.4rem; margin-left: -1px; background: var(--inv-pop); }
.dunia-fantasi-tag__pic {
    display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin-top: .3rem; overflow: hidden;
    border: 2.5px solid color-mix(in srgb, var(--df-edge) 70%, transparent); border-radius: .8rem; background: var(--df-soft); color: var(--inv-primary);
}
.dunia-fantasi-tag__pic img { width: 100%; height: 100%; object-fit: cover; }
.dunia-fantasi-tag__pic .dunia-fantasi-icon { width: 2.6rem; height: 2.6rem; }
.dunia-fantasi-tag__name { margin-top: .3rem; font: 800 1rem/1.3 var(--df-text); overflow-wrap: anywhere; }
.dunia-fantasi-tag__note { font-size: .86rem; line-height: 1.4; color: var(--df-muted); }
.dunia-fantasi-body .dunia-fantasi-tag__link { min-height: 2.75rem; margin-top: .4rem; padding: .4rem 1rem; font-size: .88rem; }
[data-world="angkasa"] .dunia-fantasi-tag__pic .dunia-fantasi-icon { color: var(--inv-primary); }

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

.dunia-fantasi-bunting { position: relative; display: flex; justify-content: space-between; height: 2.6rem; margin: -.4rem -.3rem 1.4rem; }
.dunia-fantasi-bunting::before { content: ''; position: absolute; left: 0; right: 0; top: -1.2rem; height: 1.6rem; border-bottom: 2.5px solid var(--df-line); border-radius: 0 0 50% 50%; }
.dunia-fantasi-bunting span { position: relative; width: 1.9rem; height: 2.2rem; background: var(--inv-pop); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.dunia-fantasi-bunting span:nth-child(3n + 2) { background: var(--inv-accent); }
.dunia-fantasi-bunting span:nth-child(3n) { background: var(--inv-primary); }
.dunia-fantasi-bunting span:nth-child(2), .dunia-fantasi-bunting span:nth-child(8) { top: .2rem; }
.dunia-fantasi-bunting span:nth-child(3), .dunia-fantasi-bunting span:nth-child(7) { top: .32rem; }
.dunia-fantasi-bunting span:nth-child(4), .dunia-fantasi-bunting span:nth-child(5), .dunia-fantasi-bunting span:nth-child(6) { top: .4rem; }
[data-world="dino"] .dunia-fantasi-bunting span { width: 1.6rem; height: 2.2rem; clip-path: none; border-radius: 0 100% 0 100%; border: 2px solid var(--df-line); background: var(--inv-ground); rotate: 30deg; }
[data-world="dino"] .dunia-fantasi-bunting span:nth-child(3n) { background: var(--inv-primary); }
[data-world="dino"] .dunia-fantasi-bunting span:nth-child(3n + 2) { background: color-mix(in srgb, var(--inv-ground) 60%, var(--inv-accent)); }
[data-world="angkasa"] .dunia-fantasi-bunting span { width: .8rem; height: .8rem; margin-top: .4rem; clip-path: none; border-radius: 50%; box-shadow: 0 0 10px currentColor; color: var(--inv-pop); background: currentColor; }
[data-world="angkasa"] .dunia-fantasi-bunting span:nth-child(3n + 2) { color: var(--inv-primary); }
[data-world="angkasa"] .dunia-fantasi-bunting span:nth-child(3n) { color: var(--inv-accent); }
[data-world="angkasa"] .dunia-fantasi-bunting::before { border-bottom: 1.5px dashed color-mix(in srgb, var(--inv-text) 50%, transparent); }
html.inv-anim .dunia-fantasi-bunting span { transform-origin: 50% 0; animation: dunia-fantasi-sway 3s ease-in-out infinite; }
html.inv-anim .dunia-fantasi-bunting span:nth-child(even) { animation-delay: -1.5s; }
html.inv-anim [data-world="angkasa"] .dunia-fantasi-bunting span { animation: dunia-fantasi-blink 1.6s steps(2) infinite; }
.dunia-fantasi-names { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem .55rem; margin: 0; padding: 0; list-style: none; }
.dunia-fantasi-names li {
    display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; border: 2.5px solid var(--df-edge); border-radius: 999px;
    background: var(--df-card); color: var(--df-ink); box-shadow: var(--df-shadow-sm); font: 800 .95rem/1.35 var(--df-text);
}
.dunia-fantasi-names__orn { width: 1rem; height: 1rem; flex: none; }
.dunia-fantasi-names li:nth-child(odd) { rotate: -1.5deg; }
.dunia-fantasi-names li:nth-child(even) { rotate: 1.5deg; background: var(--df-soft); }
[data-world="dino"] .dunia-fantasi-names__orn { --df-trail: var(--inv-primary); rotate: 180deg; }

/* ---------- contacts: communicators ---------- */

.dunia-fantasi-contacts__intro { font-size: 1rem; }
.dunia-fantasi-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.3rem, 1fr)); gap: 1.4rem .9rem; margin-top: 1.5rem; }
.dunia-fantasi-radio {
    position: relative; display: grid; justify-items: center; gap: .25rem; padding: 2.4rem .8rem 1rem;
    border: var(--df-border); border-radius: var(--df-radius); background: var(--df-card); color: var(--df-ink); box-shadow: var(--df-shadow-sm);
}
.dunia-fantasi-radio__grille {
    position: absolute; left: 50%; top: .8rem; width: 60%; height: .95rem; translate: -50% 0; border: 2px solid var(--df-edge); border-radius: .5rem;
    background: repeating-linear-gradient(90deg, var(--df-edge) 0 3px, var(--df-card) 3px 7px);
}
.dunia-fantasi-radio__name { font: 900 1.2rem/1.2 var(--df-display); color: var(--inv-primary); }
[data-world="dino"] .dunia-fantasi-radio__name { font-weight: 400; letter-spacing: .03em; color: var(--df-line); }
[data-world="angkasa"] .dunia-fantasi-radio__name { font-size: .95rem; font-weight: 700; color: var(--inv-text); letter-spacing: .04em; }
.dunia-fantasi-radio__role { font-size: .88rem; line-height: 1.35; color: var(--df-muted); }
.dunia-fantasi-radio__phone { font-weight: 800; }
.dunia-fantasi-radio .inv-button { width: 100%; margin-top: .45rem; }

/* ---------- health protocol ---------- */

.dunia-fantasi-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.dunia-fantasi-signs li {
    display: grid; justify-items: center; gap: .45rem; padding: .95rem .6rem; border: var(--df-border); border-radius: var(--df-radius);
    background: var(--df-card); color: var(--df-ink); box-shadow: var(--df-shadow-sm); font: 800 .92rem/1.3 var(--df-text);
}
.dunia-fantasi-signs .dunia-fantasi-icon { width: 2.5rem; height: 2.5rem; padding: .45rem; border: 2.5px solid var(--df-edge); border-radius: 50%; background: var(--inv-accent); color: var(--df-line); }
.dunia-fantasi-protocol__note { margin-top: 1rem; font-size: .96rem; }

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

.dunia-fantasi-tickets { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.dunia-fantasi-ticket {
    position: relative; display: grid; grid-template-columns: 6.9rem minmax(0, 1fr); text-align: left;
    border: 2.5px solid var(--df-edge); border-radius: .9rem; background: var(--df-card); color: var(--df-ink); box-shadow: var(--df-shadow-sm);
}
.dunia-fantasi-ticket::before, .dunia-fantasi-ticket::after {
    content: ''; position: absolute; left: calc(6.9rem - .6rem); width: 1.2rem; height: 1.2rem; border: 2.5px solid var(--df-edge); border-radius: 50%; background: var(--inv-background);
}
.dunia-fantasi-ticket::before { top: -.7rem; clip-path: inset(50% 0 0 0); }
.dunia-fantasi-ticket::after { bottom: -.7rem; clip-path: inset(0 0 50% 0); }
.dunia-fantasi-ticket__role {
    display: grid; place-items: center; padding: .6rem .5rem; border-radius: .7rem 0 0 .7rem; border-right: 2.5px dashed var(--df-edge);
    background: var(--inv-accent); color: var(--df-on-accent); font: 800 .7rem/1.25 var(--df-text); letter-spacing: .06em; text-transform: uppercase; text-align: center; overflow-wrap: break-word;
}
.dunia-fantasi-ticket__main { display: grid; align-content: center; gap: .1rem; padding: .65rem .95rem; min-width: 0; }
.dunia-fantasi-ticket__name { font: 800 1.05rem/1.25 var(--df-text); overflow-wrap: anywhere; }
.dunia-fantasi-ticket__ig {
    justify-self: start; padding: .55rem 0; color: var(--inv-primary); font-size: .88rem; font-weight: 800;
    text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere;
}
[data-world="angkasa"] .dunia-fantasi-ticket__ig { color: var(--inv-primary); }

/* ---------- closing: the finale ---------- */

.dunia-fantasi-closing { padding-top: 4.4rem; padding-bottom: 3.6rem; }
.dunia-fantasi-closing__message { font-size: 1.05rem; line-height: 1.65; }
.dunia-fantasi-closing__sign { margin-top: 1.4rem; }
.dunia-fantasi-closing__signature { font-size: .96rem; line-height: 1.5; }
.dunia-fantasi-closing__name { margin-top: .2rem; font: 900 2.4rem/1.1 var(--df-display); color: var(--inv-primary); text-shadow: var(--df-title-shadow); overflow-wrap: anywhere; }
[data-world="dino"] .dunia-fantasi-closing__name { font-weight: 400; letter-spacing: .03em; color: var(--inv-text); }
[data-world="angkasa"] .dunia-fantasi-closing__name { color: var(--inv-text); font-size: 1.9rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.dunia-fantasi-finale { position: relative; height: 12rem; margin: 1.6rem -1.15rem 0; overflow: hidden; }
.dunia-fantasi-finale__landmark { position: absolute; left: 50%; bottom: 2.4rem; width: 12rem; height: 9.6rem; translate: -50% 0; }
.dunia-fantasi-finale__mascot { position: absolute; right: 9%; bottom: 2.4rem; width: 4.6rem; height: 4.6rem; z-index: 1; }
.dunia-fantasi-finale__ground { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 4.4rem; z-index: 2; }
html.inv-anim .dunia-fantasi-finale__mascot { animation: dunia-fantasi-bob 1.8s ease-in-out infinite; }
.dunia-fantasi-closing__bye {
    margin-top: 1rem; font: 900 1.35rem/1.25 var(--df-display); color: var(--inv-primary);
}
[data-world="dino"] .dunia-fantasi-closing__bye { font-weight: 400; letter-spacing: .03em; color: var(--inv-text); }
[data-world="angkasa"] .dunia-fantasi-closing__bye { font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--inv-primary); }

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

.dunia-fantasi-branding { color: var(--inv-text); font-weight: 600; opacity: .9; }
.dunia-fantasi-body .inv-checkin { border: var(--df-border); box-shadow: var(--df-shadow); }
.dunia-fantasi-nav.inv-nav {
    --inv-nav-bg: var(--df-card); --inv-nav-text: var(--df-ink); --inv-nav-active: var(--inv-primary);
    border: var(--df-border); box-shadow: var(--df-shadow-sm); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.dunia-fantasi-nav .inv-nav__item { font: 800 .62rem/1 var(--df-text); }
.dunia-fantasi-nav .inv-nav__item.is-active { color: var(--df-on-primary); }
.dunia-fantasi-body .inv-music__button { border: var(--df-border); background: var(--inv-accent); color: var(--df-on-accent); box-shadow: var(--df-shadow-sm); }
.dunia-fantasi-body .inv-autoscroll { border: 2px solid var(--df-edge); color: var(--df-ink); background: var(--df-card); }
.dunia-fantasi-body .inv-autoscroll--running { background: var(--inv-primary); color: var(--df-on-primary); }
.dunia-fantasi-body .inv-ambient { opacity: .7; }

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

@media (max-height: 760px) {
    .dunia-fantasi-cover__inner { gap: .5rem; padding-bottom: 2.2rem; }
    [data-world="kastil"] .dunia-fantasi-cover__inner { padding-top: calc(var(--gate-top) + 2.6rem); }
    .dunia-fantasi-cover__name { font-size: clamp(2.3rem, 11.5vw, 2.9rem); }
    .dunia-fantasi-cover__quote { font-size: .9rem; line-height: 1.4; }
    .dunia-fantasi-portrait--cover { --df-pw: min(23svh, 11rem, 52vw); }
    [data-world="dino"] .dunia-fantasi-portrait--cover { --df-pw: min(21svh, 10rem, 46vw); }
}
@media (max-height: 660px) {
    .dunia-fantasi-cover__inner { gap: .4rem; padding-bottom: 2.1rem; }
    [data-world="kastil"] .dunia-fantasi-cover__inner { padding-top: calc(var(--gate-top) + 2.2rem); }
    .dunia-fantasi-cover__kicker { font-size: .72rem; padding: .22rem .85rem; }
    .dunia-fantasi-cover__name { font-size: 2.3rem; margin-top: .2rem; }
    [data-world="angkasa"] .dunia-fantasi-cover__name { font-size: 2rem; }
    .dunia-fantasi-cover__date { font-size: .9rem; padding: .25rem .85rem; }
    .dunia-fantasi-cover__quote { font-size: .84rem; line-height: 1.35; }
    .dunia-fantasi-cover__guest { padding-block: .4rem .45rem; }
    .dunia-fantasi-cover__guest-name { font-size: 1.05rem; }
    .dunia-fantasi-body .dunia-fantasi-open { min-height: 3rem; padding-block: .55rem; font-size: 1.02rem; }
    .dunia-fantasi-portrait--cover { --df-pw: min(22svh, 10rem, 50vw); }
    [data-world="dino"] .dunia-fantasi-portrait--cover { --df-pw: min(19.5svh, 9rem, 44vw); }
}

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

@media (prefers-reduced-motion: reduce) {
    .dunia-fantasi-cover--leave, [data-world] .dunia-fantasi-cover--leave { transition: opacity .3s ease; }
    .dunia-fantasi-cover--gone, [data-world] .dunia-fantasi-cover--gone { transform: none; }
}