/* PIXEL PORTFOLIO — halaman pengunjung */
.wrap { width: min(1120px, 100% - 32px); margin: 0 auto; }
.loading { text-align: center; padding: 30vh 0; font-size: 14px; color: var(--muted); }

/* layar boot */
.boot { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: grid; place-items: center; text-align: center; }
.boot[hidden] { display: none; }
.boot.out { animation: bootOut .5s steps(5) forwards; }
@keyframes bootOut { to { clip-path: inset(50% 0 50% 0); } }
.boot-inner canvas { width: 96px; height: 96px; animation: bob 1s steps(2) infinite; }
.boot-title { font-size: clamp(16px, 4vw, 28px); color: var(--primary); margin: 24px 0; text-shadow: 4px 4px 0 var(--shadow); }
.boot-bar { width: 240px; height: 20px; margin: 0 auto 28px; padding: 4px; box-shadow: 0 0 0 4px var(--border); }
.boot-bar span { display: block; height: 100%; background: var(--accent); width: 0; animation: load 1.2s steps(12) forwards; }
@keyframes load { to { width: 100%; } }
.boot-start { font-size: 12px; }
.boot-hint { color: var(--muted); margin-top: 18px; }

/* bar atas */
.topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(2px); border-bottom: var(--px) solid var(--border);
}
.logo { font-size: 14px; margin: 0; color: var(--bg); background: var(--primary); padding: 8px 10px; text-decoration: none; white-space: nowrap; }
.logo:hover { color: var(--bg); animation: wiggle .3s steps(2) 2; }
.nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a { font-family: var(--font-head); font-size: 9px; color: var(--text); text-decoration: none; padding: 10px 10px; white-space: nowrap; }
.nav a::before { content: '▶'; color: transparent; margin-right: 6px; }
.nav a:hover::before, .nav a.active::before { color: var(--primary); }
.nav a.active { color: var(--primary); }
.sound-toggle { background: none; border: 0; color: var(--muted); font-size: 22px; font-family: var(--font-body); padding: 4px 8px; }
.sound-toggle.on { color: var(--primary); }

/* section umum */
.zone { padding: 72px 0; }
.sec-title { display: flex; align-items: center; gap: 14px; font-size: clamp(14px, 2.4vw, 20px); color: var(--primary); margin-bottom: 36px; }
.sec-title::after { content: ''; flex: 1; height: var(--px); background: repeating-linear-gradient(90deg, var(--border) 0 12px, transparent 12px 24px); }
.sec-title .num { color: var(--muted); font-size: .6em; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .4s steps(4), transform .4s steps(4); }
.reveal.in { opacity: 1; transform: none; }
.empty { color: var(--muted); padding: 24px; text-align: center; }

/* hero */
.hero { min-height: calc(100vh - 70px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 48px; padding: 48px 0; }
.hero.center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.hero.center .hero-actions, .hero.center .stats { justify-content: center; }
.avatar-stage { position: relative; display: grid; justify-items: center; }
.avatar-frame { padding: 20px; display: grid; place-items: center; }
.avatar-frame canvas { width: min(340px, 70vw); height: auto; display: block; animation: bob 1.4s steps(2) infinite; }
.avatar-frame::before { content: ''; position: absolute; inset: 20px; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 25%, transparent) 0 40%, transparent 41%); background-size: 16px 16px; opacity: .25; }
.avatar-shadow { width: 50%; height: 12px; margin-top: 26px; background: var(--shadow); opacity: .5; animation: shadow 1.4s steps(2) infinite; }
.avatar-badge { position: absolute; top: -10px; right: 6%; font-family: var(--font-head); font-size: 9px; background: var(--accent); color: var(--bg); padding: 8px; transform: rotate(4deg); }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes shadow { 50% { transform: scaleX(.85); } }
@keyframes wiggle { 50% { transform: rotate(-4deg); } }
.player-tag { font-family: var(--font-head); font-size: 10px; color: var(--muted); margin-bottom: 16px; }
.player-tag b { color: var(--accent); font-weight: 400; }
.hero h1 { font-size: clamp(22px, 4.6vw, 46px); text-shadow: var(--px) var(--px) 0 var(--shadow), calc(var(--px) * -1) 0 0 color-mix(in srgb, var(--secondary) 60%, transparent); margin-bottom: 14px; word-break: break-word; }
.hero h1:hover { animation: glitch .3s steps(2) 2; }
@keyframes glitch { 33% { transform: translate(3px, -2px); text-shadow: -4px 0 var(--accent), 4px 0 var(--secondary); } 66% { transform: translate(-3px, 2px); } }
.role { font-family: var(--font-head); font-size: clamp(10px, 1.6vw, 14px); color: var(--secondary); margin: 0 0 24px; }
.dialog { padding: 18px 22px 26px; margin-bottom: 24px; min-height: 90px; text-align: left; }
.dialog p { margin: 0; font-size: calc(var(--body-size) * 1.1); }
.dialog .caret { position: absolute; right: 14px; bottom: 6px; color: var(--primary); animation: blink .8s steps(1) infinite; font-size: 16px; }
.dialog .speaker { position: absolute; top: -14px; left: 14px; font-family: var(--font-head); font-size: 9px; background: var(--primary); color: var(--bg); padding: 5px 8px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.stats { display: flex; flex-wrap: wrap; gap: 18px; }
.stat { font-family: var(--font-head); font-size: 9px; color: var(--muted); }
.stat b { display: block; font-size: 22px; color: var(--text); font-weight: 400; margin-bottom: 6px; }
.status-pill { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); margin-bottom: 18px; }
.status-pill::before { content: ''; width: 10px; height: 10px; background: #38b764; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #38b764; animation: blink 1.6s steps(1) infinite; }

/* tentang */
.about-grid { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: start; }
.portrait { padding: 12px; display: grid; place-items: center; }
.portrait canvas { width: 100%; }
.about-box { padding: 24px 28px; }
.about-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--muted); margin-top: 8px; }

/* inventori skill */
.inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.skill { padding: 16px 18px; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.skill-icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--bg); font-family: var(--font-head); font-size: 14px; color: var(--accent); box-shadow: 0 0 0 2px var(--muted); }
.skill-name { display: flex; justify-content: space-between; margin-bottom: 6px; }
.skill-name span { color: var(--muted); }
.bar { display: flex; gap: 3px; }
.bar i { flex: 1; height: 12px; background: color-mix(in srgb, var(--muted) 30%, transparent); }
.bar i.on { background: var(--primary); }
.bar i.on:last-of-type { background: var(--accent); }

/* proyek */
.filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 26px; }
.quests { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.quest { display: flex; flex-direction: column; cursor: pointer; transition: transform .1s steps(2); }
.quest:hover { transform: translate(-3px, -3px); }
.quest:hover .quest-img img { filter: saturate(1.3); }
.quest-img { aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; border-bottom: var(--px) solid var(--border); }
.quest-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quest-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.quest-body h3 { font-size: 12px; margin-bottom: 10px; }
.quest-body p { margin: 0 0 14px; color: var(--muted); flex: 1; }
.quest-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-family: var(--font-head); font-size: 8px; }
.status { padding: 5px 7px; color: var(--bg); }
.status-done { background: #38b764; } .status-wip { background: var(--primary); } .status-idea { background: var(--secondary); }
.star { color: var(--primary); }

/* jurnal */
.journal { display: grid; gap: 22px; }
.entry { display: grid; grid-template-columns: 180px 1fr auto; gap: 22px; align-items: center; padding: 18px 22px; cursor: pointer; transition: transform .1s steps(2); }
.entry:hover { transform: translateX(6px); }
.entry:hover .read { color: var(--primary); }
.entry-cover { aspect-ratio: 16/10; background: var(--bg); overflow: hidden; }
.entry-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entry.no-cover { grid-template-columns: 1fr auto; }
.entry h3 { font-size: 13px; margin-bottom: 8px; }
.entry .date { font-family: var(--font-head); font-size: 9px; color: var(--accent); display: block; margin-bottom: 8px; }
.entry p { margin: 0 0 8px; color: var(--muted); }
.read { font-family: var(--font-head); font-size: 10px; color: var(--muted); white-space: nowrap; }

/* kartu nama */
.card-zone { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); gap: 32px; align-items: start; }
.card-stage { perspective: 1200px; }
.card-stage canvas { width: 100%; display: block; transition: transform .2s; box-shadow: 10px 10px 0 var(--shadow); }
.card-side { padding: 20px; display: flex; flex-direction: column; }
.card-side h3 { font-size: 11px; color: var(--muted); }
.card-side > .btn { justify-content: center; margin-top: 12px; }

/* dropdown skin bergaya pixel */
.skin-select { position: relative; display: block; margin: 4px 4px 14px; }
.skin-select::after { content: '▼'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--primary); pointer-events: none; }
.skin-select select {
  appearance: none; -webkit-appearance: none; width: 100%; border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--font-head); font-size: 11px; line-height: 1.4; padding: 14px 40px 14px 14px;
  background: var(--bg); color: var(--text); box-shadow: 0 0 0 var(--px) var(--border);
}
.skin-select select:focus-visible { outline: var(--px) dashed var(--primary); outline-offset: 4px; }

/* ikon pixel di dalam tombol: setinggi huruf kapital, sejajar teks */
.px-ico { width: 1.4em; height: 1.4em; flex: none; }

/* kontak */
.contact { text-align: center; padding: 56px 24px; }
.contact h2 { font-size: clamp(18px, 4vw, 34px); color: var(--primary); }
.contact .countdown { font-family: var(--font-head); font-size: 48px; color: var(--accent); margin: 10px 0 24px; }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 20px; }

/* footer */
.footer { border-top: var(--px) solid var(--border); padding: 28px 16px 40px; text-align: center; color: var(--muted); }
.footer .head { font-size: 9px; }
.footer a { color: var(--muted); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; overflow-y: auto; overflow-x: hidden; padding: 40px 16px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 80%, #000); }
.modal-body { width: min(820px, 100% - 2 * var(--px)); min-width: 0; padding: 40px clamp(18px, 5vw, 56px); animation: pop .2s steps(3); }
.modal-body .prose { min-width: 0; overflow-wrap: anywhere; }
.modal-close { position: absolute; top: 10px; right: 10px; }
.article-cover { margin: -40px calc(-1 * clamp(18px, 5vw, 56px)) 28px; border-bottom: var(--px) solid var(--border); }
.article-cover img { width: 100%; display: block; max-height: 380px; object-fit: cover; }
.article-head h1 { font-size: clamp(16px, 3vw, 26px); }
.article-meta { color: var(--muted); margin-bottom: 24px; }
.article-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 36px; flex-wrap: wrap; }

/* easter egg */
body.rainbow { animation: hue 2s steps(12) infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.confetti { position: fixed; width: 10px; height: 10px; z-index: 9999; pointer-events: none; animation: fall 1.6s steps(16) forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(360deg); } }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; text-align: center; min-height: 0; gap: 28px; padding-top: 32px; }
  .hero-actions, .stats { justify-content: center; }
  .dialog { text-align: left; }
  .about-grid { grid-template-columns: 1fr; }
  .portrait { width: 140px; margin: 0 auto; }
  .card-zone { grid-template-columns: 1fr; }
  .entry, .entry.no-cover { grid-template-columns: 1fr; }
  .read { justify-self: end; }
  .quests { grid-template-columns: 1fr; }
  .zone { padding: 52px 0; }
}

/* bahasa */
.lang-toggle { display: flex; box-shadow: 0 0 0 2px var(--muted); }
.lang-toggle button { font-family: var(--font-head); font-size: 9px; background: none; border: 0; color: var(--muted); padding: 7px 8px; }
.lang-toggle button.on { background: var(--primary); color: var(--bg); }

/* sedang dikerjakan */
.now { margin-top: 26px; padding: 22px 24px 8px; border-left: 0; }
.now-label { position: absolute; top: -14px; left: 14px; font-family: var(--font-head); font-size: 9px; background: var(--accent); color: var(--bg); padding: 5px 8px; }
.now-label::before { content: '● '; animation: blink 1s steps(1) infinite; }

/* timeline pengalaman */
.timeline { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; display: grid; gap: 24px; }
.timeline::before { content: ''; position: absolute; left: 10px; top: 6px; bottom: 6px; width: var(--px); background: repeating-linear-gradient(var(--muted) 0 8px, transparent 8px 14px); }
.tl-item { position: relative; }
.tl-dot { position: absolute; left: -32px; top: 18px; width: 20px; height: 20px; background: var(--secondary); box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--border); }
.tl-dot.tl-edu { background: var(--primary); } .tl-dot.tl-org { background: var(--accent); } .tl-dot.tl-project { background: #38b764; }
.tl-card { padding: 16px 20px 6px; }
.tl-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-family: var(--font-head); font-size: 8px; margin-bottom: 10px; }
.tl-type { color: var(--bg); background: var(--muted); padding: 4px 6px; }
.tl-period { color: var(--accent); }
.tl-card h3 { font-size: 12px; margin-bottom: 6px; }
.tl-org { color: var(--secondary); margin: 0 0 8px; }
.tl-card .prose { font-size: var(--body-size); color: var(--muted); }

/* prestasi */
.trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }
.trophy { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px 20px; }
.trophy-icon { width: 56px; height: 56px; display: grid; place-items: center; font-size: 28px; background: var(--primary); color: var(--bg); box-shadow: inset -4px -4px 0 rgba(0,0,0,.25), inset 4px 4px 0 rgba(255,255,255,.3); animation: shine 3s steps(1) infinite; }
@keyframes shine { 90% { filter: none; } 95% { filter: brightness(1.4); } }
.trophy-year { font-family: var(--font-head); font-size: 8px; color: var(--accent); }
.trophy h3 { font-size: 11px; margin: 8px 0; }
.trophy p { margin: 0 0 10px; color: var(--muted); }

@media (max-width: 860px) {
  .lang-toggle button { padding: 6px; }
  .trophies { grid-template-columns: 1fr; }
}

/* ---------- latar dunia game (platformer) ---------- */
#scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: linear-gradient(var(--bg) 0 70%, color-mix(in srgb, var(--bg) 70%, #fff) 100%); }
#scene > div { position: absolute; left: 0; right: 0; background-repeat: repeat-x; image-rendering: pixelated; }
.sc-clouds { top: 70px; height: 150px; animation: drift 80s linear infinite; }
@keyframes drift { to { background-position-x: -720px; } }
body.bg-platformer { padding-bottom: 40px; }
body.bg-platformer .topbar { background: var(--surface); }
body.bg-platformer .sec-title { color: #fff; text-shadow: 3px 3px 0 var(--border); }
body.bg-platformer .sec-title .num { color: #fff; }
body.bg-platformer .sec-title::after { background: repeating-linear-gradient(90deg, #fff 0 12px, transparent 12px 24px); }
body.bg-platformer .hero h1 { color: #fff; text-shadow: 4px 4px 0 var(--border); }
body.bg-platformer .hero-text > .player-tag,
body.bg-platformer .hero-text > .status-pill,
body.bg-platformer .hero-text > .role,
body.bg-platformer .stats { background: var(--surface); padding: 6px 10px; display: inline-flex; box-shadow: 0 0 0 3px var(--border); }
body.bg-platformer .hero-text > .role { display: table; }
body.bg-platformer .stats { padding: 10px 14px; }
body.bg-platformer .filters, body.bg-platformer .empty { color: var(--text); }
body.bg-platformer .footer { background: var(--surface); }
body.bg-platformer .avatar-shadow { opacity: .25; }
body.bg-platformer .trophy-icon { box-shadow: inset -4px -4px 0 rgba(0,0,0,.25), inset 4px 4px 0 rgba(255,255,255,.5), 0 0 0 3px var(--border); }
/* teks di atas warna solid: putih di merah/biru, gelap di emas/hijau */
body.bg-platformer .btn { --f: #fff; }
body.bg-platformer .btn.alt { --f: var(--text); }
body.bg-platformer .btn.on { --f: var(--text); }
body.bg-platformer .logo, body.bg-platformer .logo:hover,
body.bg-platformer .lang-toggle button.on, body.bg-platformer .dialog .speaker { color: #fff; }
body.bg-platformer .avatar-badge, body.bg-platformer .status, body.bg-platformer .tl-type,
body.bg-platformer .now-label, body.bg-platformer .trophy-icon, body.bg-platformer .skill-icon { color: var(--text); }

/* ---------- desa pintar: siang / malam ---------- */
#scene > .sc-world { top: auto; bottom: 0; overflow: hidden; }
.sc-land { position: absolute; left: 0; bottom: 0; image-rendering: pixelated; max-width: none; }
.sc-stars, .sc-moon { display: none; }
body.night #scene { background: linear-gradient(#030409 0 55%, #0a0d1c 85%, #111628); }
body.night #scene > .sc-stars { display: block; position: absolute; inset: 0; background-image: var(--stars); background-repeat: repeat; opacity: .8; animation: twinkle 4s steps(2) infinite; }
body.night .sc-moon { display: block; position: absolute; top: 96px; right: 9%; filter: drop-shadow(0 0 18px rgba(255, 240, 180, .35)); }
body.night .sc-clouds { opacity: .5; }
@keyframes twinkle { 50% { opacity: .55; } }

/* LED IoT berkedip */
.led { position: absolute; background: var(--c); animation: led 1.6s steps(1) infinite; }
body.night .led { box-shadow: 0 0 6px 1px var(--c); }
@keyframes led { 60% { opacity: .15; } }

/* jendela menyala di malam hari */
.win-glow { position: absolute; width: 0; height: 0; }
body.night .win-glow { box-shadow: 0 0 24px 14px rgba(255, 200, 90, .28); }

/* lampu kota: mati di siang hari, menyala (dengan kedip awal) di malam hari */
.lamp { position: absolute; width: 0; height: 0; }
.lamp b { display: none; }
body.night .lamp b {
  display: block; position: absolute; left: -70px; top: -14px; width: 140px; height: 120px; pointer-events: none;
  background: radial-gradient(circle at 50% 12%, rgba(255, 228, 140, .85) 0 3px, rgba(255, 214, 107, .38) 4px 16px, rgba(255, 214, 107, .1) 34px, transparent 60px),
    linear-gradient(rgba(255, 214, 107, .34), rgba(255, 214, 107, .08) 80%, transparent);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  animation: ignite 1.4s steps(1) both; animation-delay: calc(var(--i) * .25s);
}
body.night .lamp::before { content: ''; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 160, .95) 0 4px, rgba(255, 214, 107, .45) 9px, rgba(255, 214, 107, .12) 18px, transparent 26px);
  animation: ignite 1.4s steps(1) both; animation-delay: calc(var(--i) * .25s); }
@keyframes ignite { 0% { opacity: 0; } 15% { opacity: 1; } 25% { opacity: .2; } 40% { opacity: 1; } 50% { opacity: .4; } 60%, 100% { opacity: 1; } }

/* robot patroli sawah */
.rover { position: absolute; image-rendering: pixelated; max-width: none; animation: patrol 14s steps(70) infinite alternate; }
@keyframes patrol { to { transform: translateX(var(--dist)); } }
body.night .rover { filter: drop-shadow(18px 0 10px rgba(77, 195, 255, .35)); }

/* drone terbang melintas */
.sc-drones { position: absolute; left: 0; right: 0; height: 120px; top: auto !important; }
.drone { position: absolute; left: 0; animation: fly 32s linear infinite; }
.drone img { display: block; image-rendering: pixelated; max-width: none; animation: hover .5s steps(2) infinite; }
.drone i { position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; background: #ff3b3b; animation: led 1s steps(1) infinite; }
body.night .drone i { box-shadow: 0 0 8px 2px #ff3b3b; }
.drone.d1 { top: 10px; }
.drone.d2 { top: 70px; animation-duration: 46s; animation-delay: -20s; animation-direction: reverse; }
@keyframes fly { from { transform: translateX(-90px); } to { transform: translateX(calc(100vw + 90px)); } }
@keyframes hover { 50% { transform: translateY(-3px); } }

/* kunang-kunang di atas kolam (malam saja) */
.firefly { display: none; }
body.night .firefly { display: block; position: absolute; width: 3px; height: 3px; background: #e9ff8a; box-shadow: 0 0 8px 2px rgba(233, 255, 138, .7); animation: firefly 3.4s steps(8) infinite; }
@keyframes firefly { 25% { transform: translate(6px, -8px); opacity: .3; } 50% { transform: translate(-4px, -14px); opacity: 1; } 75% { transform: translate(-8px, -4px); opacity: .2; } }

/* tombol siang / malam */
.mode-toggle { background: none; border: 0; font-size: 22px; padding: 4px 6px; color: var(--muted); line-height: 1; }
.mode-toggle:hover { color: var(--primary); }

/* kontras teks di mode malam (latar gelap, tombol emas) */
body.night.bg-platformer .btn { --f: var(--bg); }
body.night.bg-platformer .btn.alt { --f: var(--text); }
body.night.bg-platformer .logo, body.night.bg-platformer .logo:hover,
body.night.bg-platformer .lang-toggle button.on, body.night.bg-platformer .dialog .speaker { color: var(--bg); }
body.night.bg-platformer .sec-title, body.night.bg-platformer .hero h1 { color: var(--text); text-shadow: 3px 3px 0 #000; }
body.night.bg-platformer .sec-title::after { background: repeating-linear-gradient(90deg, var(--muted) 0 12px, transparent 12px 24px); }
body.night.bg-platformer .sec-title .num { color: var(--muted); }
body.night .avatar-frame::before { opacity: .12; }

/* latar selalu terpotong rapi di tepi layar (mencegah halaman melebar di HP) */
#scene { contain: strict; clip-path: inset(0); }
#scene > .sc-world { width: 100%; }

/* ---------- menu dropdown di layar kecil ---------- */
.menu-toggle { display: none; }
@media (max-width: 860px) {
  .topbar { gap: 4px; padding: 8px 10px; }
  /* logo mengecil mengikuti lebar layar supaya seimbang dengan tombol EN/ID, ☀ dan ☰ */
  .logo { font-size: clamp(7px, 2.4vw, 12px); letter-spacing: 0; padding: clamp(6px, 1.8vw, 9px) clamp(6px, 2vw, 10px); max-width: 44vw; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
  .lang-toggle { margin-left: auto; }
  .mode-toggle, .sound-toggle { font-size: 20px; padding: 4px; }
  .menu-toggle {
    display: grid; place-items: center; width: 38px; height: 38px; margin-left: 4px;
    font-family: var(--font-head); font-size: 16px; line-height: 1; color: var(--text); background: var(--surface);
    border: 0; box-shadow: 0 0 0 3px var(--border);
  }
  .topbar.open .menu-toggle { background: var(--primary); color: var(--bg); }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--surface); border-bottom: var(--px) solid var(--border);
    box-shadow: 0 8px 0 rgba(0, 0, 0, .25);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .2s steps(4), visibility 0s .2s;
  }
  .topbar.open .nav { max-height: 75vh; overflow-y: auto; visibility: visible; transition: max-height .2s steps(4); }
  .nav a { font-size: 11px; padding: 15px 20px; border-top: 2px dashed color-mix(in srgb, var(--muted) 35%, transparent); }
  .nav a::before { color: var(--muted); }
}
@media (max-width: 360px) {
  .logo { max-width: 38vw; }
  .lang-toggle button { padding: 5px 4px; font-size: 8px; }
}
.countdown.game-over { font-size: clamp(20px, 6vw, 40px); color: #ff3b3b; }