/*
  Tema CENTRAL RP: edisi HALLOWEEN. Dimuat paling akhir: hanya menambah/menimpa tampilan editor.
  Tidak menyentuh .output, #output, atau area export (lihat app.css dan ui.css).
  Palet
    --c-night   #0d0716  langit malam ungu
    --c-dusk    #2a1236  senja ungu
    --c-blue    #ff7f29  oranye labu (nama variabel lama dipertahankan)
    --c-steel   #c9a8e0  lavender kabut
    --c-ember   #ff8a4c  bara
    --c-slime   #6dff2b  hijau neon "Central"
*/

:root {
  --c-night: #0d0716;
  --c-dusk: #2a1236;
  --c-blue: #ff7f29;
  --c-blue-hi: #ffac75;
  --c-steel: #c9a8e0;
  --c-ember: #ff8a4c;
  --c-slime: #6dff2b;
  --display: 'Barlow Condensed', 'Oswald', 'Bebas Neue', Impact, sans-serif;
  --text: #efe0f6;
  --ok: #6dff2b;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   SPLASH HALLOWEEN
   ===================================================================== */

.splash {
  --px: 0;
  --py: 0;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding: 24px 24px 50px;
  background: radial-gradient(90% 80% at 50% 45%, #3a1a10 0%, #1a0b26 60%, #0d0716 100%);
  transition: opacity .5s ease, transform .5s ease;
}
.splash[hidden] { display: none; }
.splash.is-leaving {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}
.splash > * { pointer-events: none; }
.splash > .splash-content { pointer-events: auto; }

/* Gambar utama, sedikit lebih besar dari layar supaya bisa bergeser (parallax) */
.splash-bg { position: absolute; inset: -3%; overflow: hidden; }
.splash-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  translate: calc(var(--px) * -14px) calc(var(--py) * -9px);
  transition: translate .25s ease-out;
  will-change: translate;
  animation: bg-in 1s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes bg-in {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}
@keyframes bg-breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.035); }
}

/* Cahaya hijau neon berdenyut di belakang tulisan "Central" */
.hw-neon {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(62vw, 1100px);
  height: 34vh;
  translate: -38% -50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(109, 255, 43, .42), rgba(109, 255, 43, .12) 45%, rgba(109, 255, 43, 0) 72%);
  will-change: opacity, transform;
  animation: neon-pulse 3.6s ease-in-out infinite;
}
@keyframes neon-pulse {
  0%, 100% { opacity: .45; transform: scale(.96); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* Kabut yang melayang */
.hw-fog {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 38vh;
  background:
    radial-gradient(40% 55% at 20% 60%, rgba(201, 168, 224, .22), transparent 70%),
    radial-gradient(35% 50% at 55% 45%, rgba(201, 168, 224, .16), transparent 70%),
    radial-gradient(40% 60% at 85% 65%, rgba(255, 150, 80, .12), transparent 70%);
  will-change: transform;
  opacity: .9;
}
.hw-fog-a { bottom: -6vh; animation: fog-drift 38s linear infinite alternate; }
.hw-fog-b { bottom: 8vh; opacity: .55; animation: fog-drift 54s -20s linear infinite alternate-reverse; }
@keyframes fog-drift {
  from { transform: translateX(-9%); }
  to   { transform: translateX(9%); }
}

/* Partikel bara / kunang-kunang (digambar halloween.js) */
.hw-particles { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Kelelawar terbang melintas, sayap mengepak */
.hw-bats { position: absolute; inset: 0; overflow: hidden; }
.hw-flyer {
  position: absolute;
  left: 0;
  top: var(--y, 20%);
  width: var(--s, 46px);
  color: #07030c;
  will-change: transform;
  opacity: 0;
  animation: bat-cross var(--d, 16s) var(--delay, 0s) linear infinite;
}
.hw-bat { display: block; width: 100%; height: auto; transform-origin: 50% 40%; animation: wing-flap .28s ease-in-out infinite alternate; }
.f1 { --y: 14%; --s: 54px; --d: 15s; --delay: 1s; }
.f2 { --y: 30%; --s: 34px; --d: 21s; --delay: 6s; }
.f3 { --y: 8%;  --s: 40px; --d: 18s; --delay: 10s; }
.f4 { --y: 62%; --s: 30px; --d: 24s; --delay: 3s; }
.f5 { --y: 44%; --s: 46px; --d: 19s; --delay: 13s; }
.f2, .f4 { animation-name: bat-cross-rev; left: auto; right: 0; }
@keyframes bat-cross {
  0%   { opacity: 0; transform: translate(-12vw, 0) rotate(4deg); }
  6%   { opacity: .95; }
  25%  { transform: translate(24vw, -4vh) rotate(-6deg); }
  50%  { transform: translate(52vw, 5vh) rotate(5deg); }
  75%  { transform: translate(80vw, -3vh) rotate(-5deg); }
  94%  { opacity: .95; }
  100% { opacity: 0; transform: translate(112vw, 2vh) rotate(3deg); }
}
@keyframes bat-cross-rev {
  0%   { opacity: 0; transform: translate(12vw, 0) scaleX(-1) rotate(4deg); }
  6%   { opacity: .9; }
  30%  { transform: translate(-26vw, 5vh) scaleX(-1) rotate(-6deg); }
  60%  { transform: translate(-58vw, -4vh) scaleX(-1) rotate(5deg); }
  94%  { opacity: .9; }
  100% { opacity: 0; transform: translate(-112vw, 3vh) scaleX(-1) rotate(3deg); }
}
@keyframes wing-flap {
  from { transform: scaleY(1) scaleX(1); }
  to   { transform: scaleY(.55) scaleX(.9); }
}

/* Laba-laba menggantung dari atas */
.hw-spider {
  position: absolute;
  top: 0;
  left: 11%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #0a0510;
  transform-origin: 50% 0;
  animation: spider-drop 1.8s .6s cubic-bezier(.3, 1.4, .5, 1) both, spider-sway 5s 2.4s ease-in-out infinite;
}
.hw-spider i { display: block; width: 1.5px; height: 17vh; background: linear-gradient(180deg, transparent, rgba(220, 200, 240, .6)); }
.hw-spider svg { margin-top: -4px; color: #1d0f2a; }
@keyframes spider-drop { from { translate: 0 -60vh; } to { translate: 0 0; } }
@keyframes spider-sway {
  0%, 100% { rotate: -3deg; }
  50%      { rotate: 3deg; }
}

/* Kilat tipis sesekali */
.hw-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 50% at 70% 0%, rgba(210, 190, 255, .55), rgba(210, 190, 255, 0) 70%);
  opacity: 0;
  animation: lightning 13s 4s infinite;
}
@keyframes lightning {
  0%, 92%, 100% { opacity: 0; }
  93% { opacity: .35; }
  94% { opacity: .05; }
  95% { opacity: .28; }
  97% { opacity: 0; }
}

.hw-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(8, 3, 14, .75) 100%),
    linear-gradient(180deg, transparent 62%, rgba(8, 3, 14, .78) 100%);
}

.splash-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 0;
}
.splash-sub {
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(16px, 2.2vw, 22px);
  letter-spacing: .24em;
  color: #ffd9b3;
  text-shadow: 0 0 14px rgba(255, 127, 41, .8), 0 2px 8px rgba(0, 0, 0, .9);
  text-wrap: balance;
  animation: rise-in .7s 1s ease both;
}
.splash-sub span { color: var(--c-slime); text-shadow: 0 0 12px rgba(109, 255, 43, .9); }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Tombol masuk: oranye labu dengan aura menyala */
.enter-btn {
  --mx: 50%;
  --my: 50%;
  appearance: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 38px 15px 44px;
  border: 1px solid rgba(255, 190, 120, .7);
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8a2a 0%, #e24f00 100%);
  color: #fff;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(80, 20, 0, .6);
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 127, 41, .5), 0 10px 30px rgba(255, 100, 20, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .2s cubic-bezier(.2, .9, .25, 1), box-shadow .25s ease, border-color .25s ease;
  animation: rise-in .7s 1.2s ease both;
}
@keyframes btn-aura {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 127, 41, .45), 0 10px 30px rgba(255, 100, 20, .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
  50%      { box-shadow: 0 0 0 12px rgba(255, 127, 41, 0), 0 10px 40px rgba(109, 255, 43, .35), inset 0 1px 0 rgba(255, 255, 255, .3); }
}
.enter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(150px circle at var(--mx) var(--my), rgba(255, 255, 255, .4), transparent 70%);
  opacity: 0;
  transition: opacity .25s ease;
}
.enter-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  z-index: -1;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
}
.enter-btn:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: rgba(255, 230, 190, .95);
  box-shadow: 0 16px 46px rgba(255, 110, 20, .75), 0 0 28px rgba(109, 255, 43, .35), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.enter-btn:hover::before { opacity: 1; }
.enter-btn:hover::after { left: 130%; transition: left .7s ease; }
.enter-btn:active { transform: translateY(0) scale(.97); }
.enter-btn:focus-visible { outline: 3px solid var(--c-slime); outline-offset: 4px; }
.enter-btn-icon { transition: transform .25s cubic-bezier(.2, .9, .25, 1); }
.enter-btn:hover .enter-btn-icon { transform: translateX(6px); }

.splash-foot {
  position: absolute;
  z-index: 2;
  bottom: 18px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .3em;
  color: rgba(230, 200, 250, .6);
}

@media (max-width: 600px) {
  .splash-sub { letter-spacing: .18em; }
  .splash-sub span { display: block; height: 0; font-size: 0; overflow: hidden; }
}

/* Layar potret / sempit: gambar dibesarkan supaya logo tetap utuh */
@media (max-aspect-ratio: 4/5) {
  .splash-bg { inset: 0; display: grid; align-items: center; background: linear-gradient(180deg, #0d0716, #2a1236 50%, #0d0716); }
  .splash-bg img {
    width: 200vw;
    max-width: none;
    height: auto;
    translate: -50vw 0;
    object-fit: initial;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  }
  .hw-neon { top: 50%; width: 90vw; translate: -45% -50%; }
}

/* =====================================================================
   EDITOR
   ===================================================================== */

body {
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(255, 127, 41, .10), transparent 60%),
    var(--bg);
}

.topbar {
  background: linear-gradient(90deg, #1d1222 0%, #291632 55%, #1d1222 100%);
  box-shadow: 0 1px 0 rgba(255, 127, 41, .35), 0 10px 26px rgba(0, 0, 0, .35);
  position: relative;
  z-index: 30;
}

.brand {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 16px 0 12px;
  margin-right: 4px;
  border-right: 1px solid var(--border-soft);
}
.brand img {
  display: block;
  height: 30px;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 2px 8px rgba(255, 127, 41, .55));
  transition: transform .25s cubic-bezier(.2, .9, .25, 1), filter .25s ease;
}
.brand:hover img { transform: scale(1.1) rotate(-2deg); filter: drop-shadow(0 2px 12px rgba(255, 127, 41, .9)); }

/* Tab: garis bawah tumbuh dari tengah */
.tab { overflow: hidden; }
.tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-blue-hi));
  transform: scaleX(0);
  transition: transform .25s cubic-bezier(.2, .9, .25, 1);
}
.tab:hover::after, .tab.active::after { transform: scaleX(1); }
.tab:hover { color: #fff; background: rgba(255, 127, 41, .10); }
.tab.active {
  background: linear-gradient(180deg, rgba(255, 127, 41, .16), rgba(255, 127, 41, 0) 90%), var(--panel);
}

.selected-server-bar strong { letter-spacing: .06em; }
.selected-server-bar::before { box-shadow: 0 0 0 3px rgba(76, 195, 138, .2); }
.change-server-btn:hover {
  border-color: var(--c-blue);
  background: rgba(255, 127, 41, .18);
  color: #fff;
  transform: translateY(-1px);
}

/* =====================================================================
   SIDEBAR: kartu seksi, ikon, toggle, slider terisi
   ===================================================================== */

.sidebar,
.layers-sidebar {
  background:
    radial-gradient(420px 260px at 50% -40px, rgba(255, 127, 41, .13), transparent 70%),
    linear-gradient(180deg, #28182f 0, var(--panel) 280px);
}
.sidebar { padding: 12px 0 40px; }
.layers-sidebar { padding: 0 0 24px; }

details {
  margin: 0 10px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 127, 41, .06), rgba(255, 255, 255, .015));
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .25s ease, background .25s ease;
}
details:hover { border-color: #5e3c6d; }
details[open] {
  border-color: rgba(255, 127, 41, .42);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 172, 117, .12);
}

details > summary {
  gap: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
details > summary::before {
  order: 5;
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-color: var(--text-faint);
}
details > summary:hover { background: rgba(255, 127, 41, .09); }
details[open] > summary::before { border-color: var(--c-blue-hi); }
details[open] > summary { border-bottom: 1px solid var(--border-soft); }

.sum-icon {
  order: -1;
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--c-blue-hi);
  background: linear-gradient(135deg, rgba(255, 127, 41, .28), rgba(255, 127, 41, .08));
  box-shadow: inset 0 0 0 1px rgba(255, 172, 117, .22);
  transition: transform .25s cubic-bezier(.2, .9, .25, 1), background .2s ease, color .2s ease, box-shadow .2s ease;
}
details > summary:hover .sum-icon,
details[open] > summary .sum-icon {
  color: #fff;
  background: linear-gradient(135deg, #ff7f29, #fa6400);
  box-shadow: 0 4px 12px rgba(255, 127, 41, .45);
}
details > summary:hover .sum-icon { transform: scale(1.1) rotate(-6deg); }

.details-body { padding: 12px 14px 16px; }
details[open] > .details-body { animation: body-in .22s ease both; }

@keyframes body-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Teks bantuan sebagai catatan */
.hint-text {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-left: 2px solid rgba(255, 127, 41, .5);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, .025);
}
.layers-sidebar > .hint-text { margin: 4px 10px 10px; }

label.field-label { color: var(--text); font-weight: 600; }

textarea, input[type=text], input[type=number], select { border-radius: 8px; background-color: #170d1c; }

/* Checkbox menjadi toggle */
.checkbox-row input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 32px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #fff 0 6px, transparent 6.5px) no-repeat 2px center / 12px 12px,
    #392641;
  transition: background-color .2s ease, border-color .2s ease, background-position .22s cubic-bezier(.2, .9, .25, 1), box-shadow .2s ease;
}
.checkbox-row input[type=checkbox]:hover { border-color: #845996; }
.checkbox-row input[type=checkbox]:checked {
  border-color: #ffa163;
  background:
    radial-gradient(circle at center, #fff 0 6px, transparent 6.5px) no-repeat 16px center / 12px 12px,
    var(--c-blue);
  box-shadow: 0 0 12px rgba(255, 127, 41, .45);
}
.checkbox-row label { user-select: none; }

/* Slider: track terisi sampai thumb (--pct diisi central-ui.js) */
input[type=range] { margin: 6px 0 4px; }
input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--c-blue) var(--pct, 0%), #442d4d var(--pct, 0%));
}
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: #442d4d; }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--c-blue); }
input[type=range]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background: #fff;
  box-shadow: 0 0 0 2px var(--c-blue), 0 2px 6px rgba(0, 0, 0, .5);
}
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; background: #fff; border: 2px solid var(--c-blue); }
input[type=range]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--c-blue), 0 0 0 7px rgba(255, 127, 41, .25); }
input[type=range]:active::-webkit-slider-thumb { background: #fff; box-shadow: 0 0 0 2px var(--c-blue-hi), 0 0 0 9px rgba(255, 127, 41, .3); transform: scale(1.1); }

/* Layers */
.layers-header {
  height: 40px;
  padding: 0 10px 0 0;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #1d1221, #2a1732);
  border-bottom: 1px solid #0d0810;
}
.layers-header strong { border-bottom-color: var(--c-blue); letter-spacing: .04em; }
.duplicate-btn:hover { border-color: var(--c-blue); background: rgba(255, 127, 41, .2); color: #fff; }
.duplicate-btn:active { transform: scale(.96); }

.layers-list { gap: 6px; padding: 0 10px 10px; border-bottom: 0; }
.layer-item {
  min-height: 54px;
  border: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.layer-item:last-child { border-bottom: 1px solid var(--border-soft); }
.layer-item:hover { background: rgba(255, 127, 41, .10); border-color: #5e3c6d; }
.layer-item.active {
  background: linear-gradient(90deg, rgba(255, 127, 41, .28), rgba(255, 127, 41, .08));
  border-color: rgba(255, 127, 41, .6);
  box-shadow: inset 3px 0 0 var(--c-blue), 0 6px 16px rgba(0, 0, 0, .25);
}
.layer-thumb { border-radius: 7px; box-shadow: 0 0 0 1px #0d0810; }
.layer-visible:checked { background-color: var(--c-blue-hi); }
.layer-name { font-weight: 600; }

.sidebar-panel.active { animation: panel-in .28s ease both; }
@keyframes panel-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Input */
textarea:hover, input[type=text]:hover, input[type=number]:hover, select:hover { border-color: #60456b; }
textarea:focus, input[type=text]:focus, input[type=number]:focus, select:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(255, 127, 41, .22);
}

/* Tombol: spotlight mengikuti kursor (--mx/--my diset app.js) */
.btn {
  --mx: 50%;
  --my: 50%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .18s cubic-bezier(.2, .9, .25, 1), background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90px circle at var(--mx) var(--my), rgba(255, 172, 117, .30), transparent 70%);
  opacity: 0;
  transition: opacity .2s ease;
}
.btn:hover { background: #462f50; border-color: var(--c-blue); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(0) scale(.97); background: #37243f; }
.btn.primary {
  background: linear-gradient(135deg, #ff7f29, #fa6400);
  border-color: #ff9147;
  box-shadow: 0 4px 14px rgba(255, 127, 41, .3);
}
.btn.primary:hover {
  background: linear-gradient(135deg, #ff8f44, #ff761a);
  border-color: #ffbf94;
  box-shadow: 0 8px 22px rgba(255, 127, 41, .5);
}
.btn.primary:active { background: #e45b00; }

.chip { transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.chip:hover { border-color: var(--c-blue); background: rgba(255, 127, 41, .16); transform: translateY(-1px); }

.upload-control { transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.upload-control:hover { box-shadow: 0 0 0 3px rgba(255, 127, 41, .16); transform: translateY(-1px); }

.range-value { border-color: #483052; }

/* Stage */
.stage {
  background:
    radial-gradient(700px 420px at 85% 0%, rgba(255, 127, 41, .09), transparent 65%),
    var(--bg);
}
.stage-header { background: linear-gradient(90deg, #1d1221, #2a1732); }
.stage-header h1 { display: flex; align-items: center; gap: 8px; }
.stage-header h1::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(255, 127, 41, .25), 0 0 12px var(--c-blue);
}

.stage-canvas { box-shadow: 0 0 0 1px #0d0810, 0 18px 44px rgba(0, 0, 0, .5), 0 0 0 4px rgba(255, 127, 41, .06); }

.statusbar { background: linear-gradient(90deg, #1d1221, #2a1732); }
.status-cell:first-child { color: var(--c-blue-hi); font-weight: 600; }

/* =====================================================================
   TOOLBAR (kiri panel Layers, tab Maker)
   ===================================================================== */

.tools-sidebar {
  position: relative;
  z-index: 6;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 54px;
  padding: 12px 0;
  background:
    radial-gradient(120px 200px at 50% -20px, rgba(255, 127, 41, .14), transparent 70%),
    linear-gradient(180deg, #24162b 0, var(--chrome) 260px);
  border-left: 1px solid #0d0810;
  box-shadow: inset 1px 0 0 rgba(255, 172, 117, .06);
}
.tools-sidebar[hidden] { display: none; }

.tool-btn {
  appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2, .9, .25, 1), background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease;
}
.tool-btn svg { transition: transform .22s cubic-bezier(.2, .9, .25, 1); }
.tool-btn:hover {
  color: #fff;
  background: rgba(255, 127, 41, .16);
  border-color: #5e3c6d;
  transform: translateY(-1px);
}
.tool-btn:hover svg { transform: scale(1.12) rotate(-4deg); }
.tool-btn:active { transform: translateY(0) scale(.94); }
.tool-btn:focus-visible { outline: 2px solid var(--c-blue-hi); outline-offset: 2px; }
.tool-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #ff7f29, #fa6400);
  border-color: #ffac75;
  box-shadow: 0 6px 18px rgba(255, 127, 41, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* Tooltip: nama tool + shortcut */
.tool-btn::after {
  content: attr(data-tip) "   " attr(data-key);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  z-index: 60;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #170c1c;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  white-space: pre;
  pointer-events: none;
  opacity: 0;
  transform: translate(4px, -50%);
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.tool-btn:hover::after,
.tool-btn:focus-visible::after { opacity: 1; transform: translate(0, -50%); transition-delay: .25s; }

/* Responsif */
@media (max-width: 780px) {
  .tools-sidebar {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    padding: 8px 12px;
    border-left: 0;
    border-top: 1px solid #0d0810;
  }
  .tool-btn::after { display: none; }
  .brand { padding: 0 10px; }
  .enter-btn { padding: 13px 32px 13px 36px; font-size: 20px; }
}


/* =====================================================================
   HALLOWEEN: dekorasi editor (di luar area export)
   ===================================================================== */

/* Jaring laba-laba + laba-laba kecil menggantung di bar atas */
.hw-topdeco {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  pointer-events: none;
  color: rgba(214, 190, 236, .5);
  overflow: hidden;
}
.hw-web { position: absolute; right: 0; top: 0; width: 90px; height: 40px; opacity: .55; }
.hw-thread {
  position: absolute;
  left: 38%;
  top: 0;
  width: 1px;
  height: 10px;
  background: rgba(214, 190, 236, .6);
  transform-origin: 50% 0;
  animation: dangle-thread 3.4s ease-in-out infinite;
}
.hw-dangler {
  position: absolute;
  left: calc(38% - 11px);
  top: 8px;
  color: #ffa163;
  animation: dangle-bob 3.4s ease-in-out infinite;
}
@keyframes dangle-thread { 0%, 100% { height: 6px; } 50% { height: 12px; } }
@keyframes dangle-bob { 0%, 100% { translate: 0 -4px; } 50% { translate: 0 2px; } }

/* Garis neon oranye -> hijau di bawah bar atas */
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0, #ff7f29 18%, #6dff2b 50%, #ff7f29 82%, transparent 100%);
  opacity: .75;
  box-shadow: 0 0 8px rgba(255, 127, 41, .6);
}

/* Labu kecil di status bar */
.status-cell:first-child::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 7px;
  vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236dff2b' d='M11 2h2v3h-2z'/%3E%3Cellipse cx='12' cy='14' rx='10' ry='8.5' fill='%23ff7f29'/%3E%3Cpath fill='%23140a1c' d='M6 11l3 3-3 0zM18 11l-3 3 3 0zM7 17c3 3 7 3 10 0l-2 0-1.5 1.2-1.5-1.2-1.5 1.2L9 17z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 127, 41, .8));
}

/* Tab aktif & judul stage bernuansa Halloween */
.stage-header h1 { text-shadow: 0 0 18px rgba(255, 127, 41, .35); }
.tab.active { color: #fff; text-shadow: 0 0 10px rgba(255, 127, 41, .6); }
.enter-btn-label { position: relative; }
.chip { border-color: #5e3c6d; }
.btn.primary, .btn.accent { box-shadow: 0 0 14px rgba(255, 127, 41, .3); }

/* Scrollbar */
* { scrollbar-color: #6a3f7a transparent; }
::-webkit-scrollbar-thumb { background: #5a3a69; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #ff7f29; background-clip: content-box; }

@media (max-width: 780px) {
  .hw-topdeco { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .splash-bg img, .hw-neon, .hw-fog, .hw-flyer, .hw-bat, .hw-spider, .hw-flash,
  .enter-btn, .hw-thread, .hw-dangler, .topbar::after, .splash-sub { animation: none !important; }
  .hw-flyer, .hw-flash { display: none; }
  .splash, .splash-bg img { transition: none !important; }
}

/* =====================================================================
   HALLOWEEN 2: hantu putih, labu, tombol suara
   ===================================================================== */

/* Hantu putih melayang melintas (luar: horizontal, dalam: naik-turun) */
.hw-ghosts { position: absolute; inset: 0; overflow: hidden; }
.hw-ghost {
  position: absolute;
  left: 0;
  top: var(--y, 30%);
  width: var(--s, 70px);
  opacity: 0;
  isolation: isolate;
  animation: ghost-cross var(--d, 26s) var(--delay, 0s) linear infinite;
}
.hw-ghost-svg {
  display: block;
  width: 100%;
  height: auto;
  color: rgba(255, 255, 255, .78);
  will-change: transform;
  animation: ghost-bob 3.2s ease-in-out infinite;
}
.hw-ghost { will-change: transform, opacity; }
.hw-ghost::before {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .38), rgba(190, 160, 255, .16) 55%, rgba(190, 160, 255, 0));
}
.g1 { --y: 22%; --s: 84px; --d: 28s; --delay: 2s; }
.g2 { --y: 58%; --s: 56px; --d: 34s; --delay: 11s; }
.g3 { --y: 8%;  --s: 46px; --d: 24s; --delay: 18s; }
.g4 { --y: 72%; --s: 96px; --d: 40s; --delay: 7s; }
.g2, .g4 { left: auto; right: 0; animation-name: ghost-cross-rev; }
.g2 .hw-ghost-svg, .g4 .hw-ghost-svg { animation-duration: 4s; animation-delay: -1s; }
@keyframes ghost-cross {
  0%   { opacity: 0; transform: translate(-14vw, 0); }
  8%   { opacity: .9; }
  50%  { transform: translate(52vw, -6vh); }
  92%  { opacity: .9; }
  100% { opacity: 0; transform: translate(112vw, 3vh); }
}
@keyframes ghost-cross-rev {
  0%   { opacity: 0; transform: translate(14vw, 0) scaleX(-1); }
  8%   { opacity: .85; }
  50%  { transform: translate(-52vw, 7vh) scaleX(-1); }
  92%  { opacity: .85; }
  100% { opacity: 0; transform: translate(-112vw, -4vh) scaleX(-1); }
}
@keyframes ghost-bob {
  0%, 100% { transform: translateY(-9px) rotate(-4deg); }
  50%      { transform: translateY(9px) rotate(4deg); }
}

/* Labu menyala di dasar layar */
.hw-pumpkins { position: absolute; inset: 0; z-index: 1; }
.hw-pumpkin {
  position: absolute;
  bottom: var(--b, 4vh);
  left: var(--l, auto);
  right: var(--r, auto);
  width: var(--s, 84px);
  animation: pumpkin-bob var(--bd, 4.5s) ease-in-out infinite;
}
.hw-pumpkin { will-change: transform; isolation: isolate; }
.hw-pumpkin svg { position: relative; display: block; width: 100%; height: auto; }
.hw-pumpkin::before {
  content: '';
  position: absolute;
  inset: -45%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 150, 40, .6), rgba(255, 110, 20, .22) 55%, rgba(255, 110, 20, 0));
  animation: pumpkin-glow 2.4s steps(1) infinite;
}
.p1 { --l: 3%;  --b: 3vh; --s: 96px; rotate: -8deg; }
.p2 { --l: 11%; --b: 1vh; --s: 58px; rotate: 6deg; --bd: 3.8s; }
.p3 { --r: 3%;  --b: 3vh; --s: 92px; rotate: 9deg; --bd: 5s; }
.p4 { --r: 11%; --b: 1vh; --s: 54px; rotate: -5deg; --bd: 4.1s; }
.p2::before { animation-delay: -.7s; } .p3::before { animation-delay: -1.3s; } .p4::before { animation-delay: -1.9s; }
@keyframes pumpkin-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes pumpkin-glow {
  0%, 100% { opacity: .85; }
  30% { opacity: 1; }
  34% { opacity: .55; }
  60% { opacity: .95; }
}

/* Semburan hantu/labu/kelelawar saat klik Masuk (dibuat halloween-sfx.js) */
.hw-burst {
  position: fixed;
  z-index: 10001;
  left: 0;
  top: 0;
  width: 40px;
  margin: -20px 0 0 -20px;
  pointer-events: none;
}
.hw-burst svg { display: block; width: 100%; height: auto; }

/* Tombol suara */
.hw-sound-btn {
  appearance: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 170, 100, .5);
  border-radius: 50%;
  background: rgba(20, 8, 30, .6);
  color: #ffd9b3;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hw-sound-btn:hover { transform: scale(1.1); border-color: #ffa163; background: rgba(255, 127, 41, .25); box-shadow: 0 0 16px rgba(255, 127, 41, .5); }
.hw-sound-btn .ico-off { display: none; }
.hw-sound-btn[aria-pressed="true"] .ico-on { display: none; }
.hw-sound-btn[aria-pressed="true"] .ico-off { display: block; opacity: .75; }
.splash > .hw-sound-btn { position: absolute; top: 16px; right: 16px; z-index: 6; pointer-events: auto; }
.hw-sound-top { flex: none; align-self: center; width: 28px; height: 28px; margin-right: 12px; border-color: var(--border); background: transparent; }

/* Hantu kecil lewat pelan di dasar editor */
.hw-app-ghost {
  position: fixed;
  left: 0;
  bottom: 22px;
  z-index: 25;
  width: 30px;
  pointer-events: none;
  color: rgba(255, 255, 255, .5);
  opacity: 0;
  will-change: transform;
  animation: app-ghost 46s 12s linear infinite;
}
.hw-app-ghost svg { display: block; width: 100%; height: auto; animation: ghost-bob 3s ease-in-out infinite; }
@keyframes app-ghost {
  0%   { opacity: 0; transform: translateX(-5vw); }
  4%   { opacity: .8; }
  30%  { opacity: .8; }
  34%  { opacity: 0; transform: translateX(105vw); }
  100% { opacity: 0; transform: translateX(105vw); }
}
.app[hidden] .hw-app-ghost { display: none; }

@media (max-width: 600px) {
  .p2, .p4 { display: none; }
  .hw-pumpkin { --s: 62px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-ghost, .hw-ghost-svg, .hw-pumpkin, .hw-pumpkin svg, .hw-app-ghost, .hw-app-ghost svg { animation: none !important; }
  .hw-ghost, .hw-app-ghost { display: none; }
}

/* Petunjuk saat browser memblokir suara otomatis */
.hw-sound-hint {
  position: absolute;
  top: 24px;
  right: 64px;
  z-index: 6;
  padding: 7px 14px;
  border: 1px solid rgba(255, 170, 100, .55);
  border-radius: 999px;
  background: rgba(20, 8, 30, .7);
  color: #ffd9b3;
  font: 600 12px/1 var(--ui);
  letter-spacing: .04em;
  pointer-events: none;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.splash.sound-pending .hw-sound-hint { opacity: 1; transform: none; animation: hint-pulse 1.8s ease-in-out infinite; }
.splash.sound-pending #hwSoundSplash { animation: hint-ring 1.8s ease-in-out infinite; }
@keyframes hint-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 127, 41, .4); } 50% { box-shadow: 0 0 18px 2px rgba(255, 127, 41, .5); } }
@keyframes hint-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 127, 41, .55); } 50% { box-shadow: 0 0 0 10px rgba(255, 127, 41, 0); } }
@media (max-width: 600px) { .hw-sound-hint { right: 16px; top: 62px; } }

/* Mode ringan: diaktifkan otomatis (halloween.js) bila FPS rendah */
.splash { contain: layout paint; }
.splash.hw-lite .hw-fog,
.splash.hw-lite .hw-flash,
.splash.hw-lite .hw-particles,
.splash.hw-lite .g3, .splash.hw-lite .g4,
.splash.hw-lite .f3, .splash.hw-lite .f4, .splash.hw-lite .f5,
.splash.hw-lite .p2, .splash.hw-lite .p4 { display: none; }
.splash.hw-lite .hw-neon, .splash.hw-lite .hw-bat, .splash.hw-lite .hw-pumpkin::before { animation: none; }