/* Pulau Pelita: tambahan kepada /t/serambi/style.css */
body.theme-pulau { background: #0b1530; }
#stage { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; background: #0b1530; }
.no-3d #stage { display: none; }
/* Apabila 3D sedia, muka depan lutsinar supaya pulau yang berputar kelihatan di belakang kad. */
.has-3d .cover { background: linear-gradient(180deg, rgba(4,9,28,.62), rgba(4,9,28,.08) 46%, rgba(4,9,28,.66)); }
.theme-pulau .cover-card { background: rgba(10,22,52,.82); }
.theme-pulau .experience { z-index: 1; background: transparent; }
.no-3d .experience { background: #0b1530 var(--cover-image) center/cover no-repeat; }
.theme-pulau .world-shade { background: linear-gradient(180deg, #050b2050, transparent 18%, transparent 75%, #050b2066); }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.labels .scene-label[data-anchor], .labels .you-label {
  left: 0; top: 0; pointer-events: auto;
  transform: translate(var(--x, -999px), var(--y, -999px)) translate(-50%, -100%);
  transition: background .18s ease;
}
.labels .scene-label[data-anchor]:hover, .labels .scene-label[data-anchor].is-near { transform: translate(var(--x), var(--y)) translate(-50%, -112%); }
.labels .scene-label--npc {
  padding: 6px 12px; border: 2px solid #ccb581; border-radius: 18px; background: #12304aee; color: #fff1d2;
  box-shadow: 0 4px 12px #0007; font-size: 13px;
}
.labels .scene-label--npc::before, .labels .scene-label--npc::after { content: none; }
.labels .scene-label--npc.is-near, .labels .scene-label--npc:hover { background: #ffe7ad; color: #3c3025; }
.labels .you-label { pointer-events: none; }
.labels .is-off { visibility: hidden; }
.no-3d .labels, .no-3d .joystick, .no-3d .near-action, .no-3d .guide { display: none !important; }
.theme-pulau .npc-chat-portrait, .theme-pulau .character-option img { object-fit: contain; }
@media (max-width: 760px) {
  .labels .scene-label[data-anchor] { padding: 7px 10px; font-size: 13px; }
  .labels .scene-label[data-anchor]::before, .labels .scene-label[data-anchor]::after { margin: 0 4px; }
}