/* ══════════════════════════════════════════════════
   SKY PASSPORT + SOUND WIDGETS
══════════════════════════════════════════════════ */
#passport-widget {
  position:fixed; bottom:96px; right:20px; z-index:300;
  font-family:'Nunito',sans-serif;
  opacity:0; pointer-events:none; transform:translateY(16px);
  transition:opacity .5s, transform .6s var(--spring);
}
#passport-widget.visible { opacity:1; pointer-events:all; transform:translateY(0); }
.pp-toggle {
  background:linear-gradient(135deg,#1B4332,#2D6A4F);
  border:1.5px solid rgba(255,255,255,.2); border-radius:50px;
  padding:7px 13px; cursor:pointer; display:flex; align-items:center; gap:6px;
  box-shadow:0 3px 14px rgba(0,0,0,.32);
  transition:transform .3s var(--spring),box-shadow .3s;
  color:white; font-size:11px; font-weight:700;
}
.pp-toggle:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 10px 32px rgba(0,0,0,.42); }
.pp-toggle.all-done {
  background:linear-gradient(135deg,#8B6914,#FFD700,#8B6914);
  animation:ppGold 2.5s ease-in-out infinite;
}
@keyframes ppGold {
  0%,100%{box-shadow:0 4px 20px rgba(255,215,0,.4);}
  50%{box-shadow:0 10px 40px rgba(255,215,0,.7),0 0 0 8px rgba(255,215,0,.1);}
}
.pp-panel {
  position:absolute; bottom:60px; right:0; width:284px;
  background:linear-gradient(160deg,#172e1f,#0d1a12);
  border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  transform:scale(.82) translateY(18px); transform-origin:bottom right;
  opacity:0; pointer-events:none;
  transition:transform .35s var(--spring),opacity .3s;
}
.pp-panel.open { transform:scale(1) translateY(0); opacity:1; pointer-events:all; }
.pp-title { font-family:'Baloo 2',cursive; font-size:17px; font-weight:800; color:#FFD97E; margin-bottom:3px; }
.pp-sub { font-size:10px; color:rgba(255,255,255,.38); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:16px; }
.stamp-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stamp-slot {
  background:rgba(255,255,255,.05); border:1.5px dashed rgba(255,255,255,.14);
  border-radius:12px; padding:14px 8px; display:flex; flex-direction:column;
  align-items:center; gap:5px; transition:all .4s var(--spring); min-height:82px; justify-content:center;
}
.stamp-slot.earned { background:rgba(255,215,0,.09); border:1.5px solid rgba(255,215,0,.32); transform:scale(1.03); }
.stamp-slot:nth-child(5) { grid-column:1/-1; }
.s-icon { font-size:26px; line-height:1; }
.s-name { font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.3); text-align:center; }
.stamp-slot.earned .s-name { color:rgba(255,215,0,.7); }
.s-empty { font-size:22px; opacity:.18; }
.pp-done {
  margin-top:14px; padding:12px; border-radius:10px;
  background:rgba(255,215,0,.09); border:1px solid rgba(255,215,0,.28);
  font-size:11px; color:#FFD97E; text-align:center; line-height:1.55; display:none;
}
.pp-done.show { display:block; }

/* Sound button */
#soundBtn{position:fixed;bottom:24px;left:24px;z-index:301;background:rgba(8,22,14,.88);border:1.5px solid rgba(255,255,255,.15);border-radius:50px;padding:9px 16px;cursor:pointer;color:rgba(255,255,255,.75);font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .5s,transform .2s cubic-bezier(.34,1.56,.64,1);}
#soundBtn.visible{opacity:1;pointer-events:all;}
#soundBtn:hover{transform:scale(1.06);}