/* Shared presentation for Jumpulsa and its privacy pages. All assets are local. */
a:focus-visible, summary:focus-visible { outline: 3px solid #876120; outline-offset: 5px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.footer-links a { text-underline-offset: 4px; }
.footer { padding-block: 25px; }
.button { gap: 12px; }
.jumpulsa-art { position: relative; isolation: isolate; min-height: 470px; overflow: hidden; background: #5d5a80 url('/assets/jumpulsa/sky.png') center / cover; }
.jumpulsa-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #101c3510, transparent 65%, #1c203332); pointer-events: none; }
.art-clouds, .art-front { position: absolute; inset: -3%; background-repeat: no-repeat; background-size: auto 108%; image-rendering: pixelated; }
.art-clouds { background-image: url('/assets/jumpulsa/clouds.png'); background-position: 46% 50%; animation: cloud-drift 20s ease-in-out infinite alternate; }
.art-front { background-image: url('/assets/jumpulsa/foreground.png'); background-position: 55% 90%; transform: translateY(24%); animation: foreground-drift 16s ease-in-out infinite alternate; }
.jumpulsa-art .art-robot { position: absolute; top: 28%; left: 50%; width: 224px; height: 224px; max-width: none; object-fit: contain; transform: translateX(-50%); image-rendering: pixelated; filter: drop-shadow(0 16px 12px #14203980) drop-shadow(0 0 1px #112037); z-index: 2; animation: robot-hover 5s ease-in-out infinite; }
@keyframes robot-hover { 50% { transform: translate(-50%, -12px) rotate(-3deg); } }
@keyframes cloud-drift { to { translate: 2% 0; } }
@keyframes foreground-drift { to { translate: -2% 0; } }
.jumpulsa-hero { display: grid; grid-template-columns: 1.13fr 1fr; gap: 42px; align-items: center; padding-block: 60px 80px; }
.back-link { display: inline-block; color: #686e68; font-size: .85rem; text-decoration: none; margin-bottom: 42px; }
.game-intro h1 { font-size: clamp(4.3rem, 7.6vw, 7rem); letter-spacing: -.06em; }
.title-dot { color: #c97538; }
.game-tagline { font-size: clamp(2.4rem, 4vw, 3.8rem); line-height: 1.08; letter-spacing: -.04em; margin: 22px 0; font-weight: 700; }
.game-intro .eyebrow { font-size: .68rem; letter-spacing: .12em; }
.game-intro .lead { max-width: 470px; }
.platform-note { color: #6d736f; font-size: .8rem; margin-top: 24px; }
.hero-world { position: relative; border-radius: 180px 180px 38px 38px; overflow: hidden; box-shadow: 0 26px 65px #32325624; }
.hero-world .jumpulsa-art { min-height: 630px; }
.hero-world .art-robot { width: 256px; height: 256px; top: 29%; }
.jumpulsa-band { border-block: 1px solid var(--line); background: #ebe9e0; }
.fact-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 22px; font-size: .82rem; font-weight: 700; }
.fact-row span::before { content: '✦'; color: #99692f; margin-right: 12px; }
.game-story { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
.story-copy h2 { font-size: clamp(2.5rem, 4.3vw, 4.1rem); }
.story-copy > p:not(.eyebrow) { color: var(--muted); }
.inline-link { display: inline-block; color: #343e37; margin-top: 12px; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.screenshot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.game-shot { margin: 0; min-width: 0; }
.game-shot figcaption { font-size: .78rem; margin-top: 16px; color: #626b65; text-align: center; }
.shot-offset { padding-top: 64px; }
.preview-note { grid-column: 1 / -1; margin: 0; text-align: center; font-size: .72rem; color: #6d736f; }
.how-section { background: #ecece3; border-block: 1px solid var(--line); }
.how-section .section { padding-block: 80px; }
.play-steps { list-style: none; margin: 52px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.step-number { display: block; color: #7b7463; font-size: .78rem; letter-spacing: .12em; border-top: 1px solid #b7b8ab; padding-top: 18px; margin-bottom: 25px; }
.play-steps h3 { font-size: 1.45rem; letter-spacing: -.025em; }
.play-steps p { color: #656b63; font-size: .96rem; }
.comfort-note { font-size: .82rem; color: #6c7068; }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.beta-section { padding-bottom: 100px; }
.beta-card { border-radius: 32px; background: #252d3c; color: #fff7e5; padding: 60px; display: flex; gap: 50px; align-items: center; justify-content: space-between; }
.beta-card .eyebrow { color: #ead294; }
.beta-card h2 { font-size: clamp(2.5rem, 4vw, 3.7rem); }
.beta-card p:not(.eyebrow) { max-width: 540px; color: #c9cdd6; }
.beta-card .button { flex: none; }
.policy-wrap { max-width: 1060px; padding-block: 52px 90px; }
.policy-wrap h1 { font-size: clamp(2.7rem, 6vw, 5rem); max-width: 840px; }
.policy-deck { color: #626b65; max-width: 700px; font-size: 1.12rem; }
.policy-date { font-size: .85rem; color: #6d736f; }
.policy-summary { background: #e8ece5; border: 1px solid #d9e0d3; padding: 24px 28px; border-radius: 20px; margin-block: 32px; }
.policy-summary p { margin: 0; }
.policy-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 58px; margin-top: 48px; }
.policy-toc { position: sticky; top: 106px; align-self: start; display: flex; flex-direction: column; gap: 10px; font-size: .82rem; border-left: 1px solid #c9cec5; padding-left: 18px; }
.policy-toc a { color: #53624f; text-decoration: none; }
.policy-toc a:hover { text-decoration: underline; }
.policy-body { min-width: 0; }
.policy-body section { margin-bottom: 38px; scroll-margin-top: 100px; }
.policy-body h2 { font-size: 1.55rem; line-height: 1.2; letter-spacing: -.025em; margin-bottom: 14px; }
.policy-body h3 { font-size: 1.08rem; line-height: 1.4; letter-spacing: -.015em; margin-top: 22px; }
.policy-body p, .policy-body li { color: #4b554d; font-size: .98rem; }
.policy-body li + li { margin-top: 8px; }
.policy-body a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.policy-body address { font-style: normal; color: #4b554d; }
.policy-body table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.policy-body th, .policy-body td { padding: 14px 10px; border-bottom: 1px solid #d9ded4; text-align: left; vertical-align: top; }
.robots-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
.robots-copy h2 { font-size: clamp(2.5rem, 4.3vw, 4.1rem); }
.robots-copy > p:not(.eyebrow) { color: var(--muted); }
.robot-roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.robot-roster li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 8px 16px; border-radius: 22px; background: linear-gradient(180deg, #5d5a80, #8d6a88 70%, #d98b6a); box-shadow: 0 14px 30px #32325620; }
.robot-roster img { width: 100%; max-width: 104px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 8px 6px #14203966); }
.robot-roster strong { color: #fff7e5; font-size: .78rem; line-height: 1.2; text-shadow: 0 1px 3px #152039; }
.robot-roster span { color: #f3e3cf; font-size: .66rem; line-height: 1.3; }
.multiplayer-section { background: #252d3c; color: #fff7e5; }
.multiplayer-section .eyebrow { color: #ead294; }
.multiplayer-section .story-copy > p:not(.eyebrow), .multiplayer-section .game-shot figcaption { color: #c9cdd6; }
.multiplayer-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; padding-block: 90px; }
.screen-window { border: 6px solid #1b2331; border-radius: 28px; overflow: hidden; background: #5c5c80; box-shadow: 0 20px 42px #22203428; }
.screen-window img { display: block; width: 100%; height: auto; max-width: none; object-fit: contain; }
.gallery-section { padding-bottom: 40px; }
.gallery-section h2 { font-size: clamp(2.3rem, 4vw, 3.6rem); }
.gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: 230px; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 36px max(24px, calc((100vw - var(--shell)) / 2)) 26px; scrollbar-width: thin; }
.gallery-track:focus-visible { outline: 2px solid #99692f; outline-offset: -2px; }
.gallery-shot { margin: 0; scroll-snap-align: center; }
.gallery-shot figcaption { margin-top: 14px; font-size: .76rem; color: #626b65; }
.gallery-shot figcaption strong { display: block; color: #343e37; font-size: .86rem; }
.gallery-note { margin-top: 0; }
@media (max-width: 1000px) {
  .robots-section, .multiplayer-grid { gap: 35px; }
  .robot-roster { grid-template-columns: repeat(4, 1fr); }
  .jumpulsa-hero { gap: 28px; }
  .hero-world .jumpulsa-art { min-height: 550px; }
  .game-story { gap: 35px; }
  .beta-card { padding: 40px; gap: 28px; }
}
@media (max-width: 760px) {
  .jumpulsa-hero { grid-template-columns: 1fr; padding-top: 30px; gap: 40px; }
  .game-intro h1 { font-size: clamp(4rem, 14vw, 6rem); }
  .game-tagline { font-size: 3rem; }
  .back-link { margin-bottom: 30px; }
  .hero-world { border-radius: 120px 120px 28px 28px; }
  .hero-world .jumpulsa-art { min-height: 470px; }
  .hero-world .art-robot { width: 224px; height: 224px; }
  .fact-row { justify-content: center; gap: 12px 24px; }
  .game-story, .details-grid, .robots-section, .multiplayer-grid { grid-template-columns: 1fr; gap: 42px; }
  .multiplayer-grid { padding-block: 70px; }
  .robot-roster { grid-template-columns: repeat(3, 1fr); }
  .gallery-track { grid-auto-columns: 200px; }
  .game-story .story-copy { max-width: 560px; }
  .screenshot-pair { max-width: 580px; margin-inline: auto; gap: 16px; }
  .play-steps { grid-template-columns: 1fr; gap: 24px; }
  .play-steps p { max-width: 540px; }
  .step-number { margin-bottom: 12px; }
  .beta-card { flex-direction: column; align-items: flex-start; padding: 32px; }
  .policy-layout { grid-template-columns: 1fr; gap: 30px; margin-top: 32px; }
  .policy-toc { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
}
@media (max-width: 480px) {
  .jumpulsa-art { min-height: 360px; }
  .jumpulsa-art .art-robot { width: 192px; height: 192px; top: 24%; }
  .hero-world .jumpulsa-art { min-height: 400px; }
  .hero-world .art-robot { top: 25%; }
  .game-tagline { font-size: 2.6rem; }
  .desktop-break { display: none; }
  .screen-window { border-width: 4px; border-radius: 18px; }
  .robot-roster { grid-template-columns: repeat(2, 1fr); }
  .gallery-track { grid-auto-columns: 62vw; }
  .shot-offset { padding-top: 44px; }
  .game-shot figcaption { font-size: .68rem; }
  .preview-note { font-size: .68rem; }
  .policy-summary { padding: 22px; }
  .policy-toc { font-size: .78rem; }
  .footer-links { gap: 12px 18px; }
  .jumpulsa-page .nav-links { display: flex; gap: 16px; }
  .jumpulsa-page .nav-links a:not([href='/jumpulsa/privacy/']) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .art-clouds, .art-front, .jumpulsa-art .art-robot { animation: none; }
}