:root{
  --bg:#130819;
  --bg-2:#2a0f28;
  --pink:#ff8fc7;
  --rose:#ff5e9f;
  --cream:#fff5eb;
  --text:#fffafc;
  --muted:rgba(255,255,255,.72);
  --glass:rgba(255,255,255,.09);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
body{overflow:hidden}
button,input{font:inherit}
button{cursor:pointer}
.scene{
  position:fixed; inset:0; display:none; place-items:center;
  overflow:auto; padding:70px 20px 40px;
  background:
    radial-gradient(circle at 20% 15%,rgba(255,118,185,.18),transparent 28%),
    radial-gradient(circle at 85% 78%,rgba(133,92,255,.18),transparent 32%),
    linear-gradient(145deg,var(--bg),var(--bg-2));
}
.scene.is-active{display:grid;animation:sceneIn .7s ease both}
@keyframes sceneIn{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:Georgia,serif}
h2{font-size:clamp(34px,7vw,64px);margin-bottom:12px}
.eyebrow{letter-spacing:.26em;font-size:12px;color:#ffd3e7;text-transform:uppercase}
.primary-button,.secondary-button{
  border:0;border-radius:999px;padding:14px 23px;font-weight:700;transition:.25s ease
}
.primary-button{
  color:#3d1029;background:linear-gradient(135deg,#fff,#ffd7e9);
  box-shadow:0 12px 35px rgba(255,105,173,.25)
}
.primary-button:hover{transform:translateY(-2px) scale(1.02)}
.secondary-button{color:white;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.back-button{
  position:fixed;z-index:50;top:18px;left:18px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:white;background:rgba(255,255,255,.08);backdrop-filter:blur(12px)
}
.hidden-action{opacity:0;pointer-events:none;transform:translateY(12px)}
.hidden-action.is-visible{opacity:1;pointer-events:auto;transform:none}
.glass-card{
  width:min(680px,92vw);padding:42px;border:1px solid rgba(255,255,255,.13);
  border-radius:30px;background:rgba(255,255,255,.08);backdrop-filter:blur(22px);
  box-shadow:0 30px 80px rgba(0,0,0,.35);text-align:center
}
.music-player{
  position:fixed;z-index:500;left:16px;bottom:16px;display:flex;align-items:center;gap:12px;
  width:min(390px,calc(100vw - 32px));padding:10px 13px;border-radius:18px;
  background:rgba(15,7,20,.7);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(16px)
}
.music-player button{width:42px;height:42px;border-radius:50%;border:0;background:#ffd5e7;color:#43142e}
.music-player div{min-width:110px;display:flex;flex-direction:column}
.music-player span{font-size:11px;color:var(--muted)}
.music-player input{flex:1}
.lightbox,.credits-screen{
  position:fixed;inset:0;z-index:1000;display:none;place-items:center;background:rgba(4,2,7,.92)
}
.lightbox.is-visible,.credits-screen.is-visible{display:grid}
.lightbox img{max-width:88vw;max-height:78vh;border:12px solid white;box-shadow:0 25px 80px #000}
.lightbox p{position:fixed;bottom:32px}
.lightbox button,.credits-screen>button{
  position:fixed;z-index:2;top:18px;right:18px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:white;font-size:28px
}
.cursor-layer{position:fixed;inset:0;z-index:2000;pointer-events:none;overflow:hidden}
.cursor-particle{position:absolute;animation:cursorPop .8s ease-out forwards}
@keyframes cursorPop{to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.5) rotate(180deg)}}
@media(max-width:600px){
  .music-player{right:12px;left:12px;bottom:10px}
  .glass-card{padding:32px 22px}
}
/* MUSIC PLAYER MINI DI HP */
@media (max-width: 600px) {
  .music-player {
    width: 190px !important;
    max-width: calc(100vw - 30px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    padding: 7px 10px !important;
    gap: 8px !important;
    border-radius: 16px !important;
  }

  .music-player button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 16px !important;
  }

  .music-player div {
    min-width: 0 !important;
    flex: 1 !important;
  }

  .music-player strong {
    font-size: 12px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .music-player span,
  .music-player input {
    display: none !important;
  }
}