/* =========================================================
   KALEM STORE V28 — ANIMATED ROBLOX ITEM PREVIEW
   ========================================================= */
#eightbitGrid .redeem-image{cursor:pointer}
#eightbitGrid .redeem-image::before{
  content:"Klik foto untuk preview";
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:4;
  padding:7px 10px;
  border-radius:999px;
  color:#eefcff;
  background:rgba(7,10,18,.74);
  border:1px solid rgba(65,232,255,.22);
  backdrop-filter:blur(10px);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.04em;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .22s ease,transform .22s ease;
  pointer-events:none;
}
#eightbitGrid .redeem-image:hover::before,
#eightbitGrid .redeem-image:focus-visible::before{opacity:1;transform:none}

.item-showcase-modal-v28{z-index:2600}
.item-showcase-dialog-v28{
  width:min(980px,calc(100% - 28px));
  max-height:min(92vh,900px);
  padding:0;
  overflow:auto;
  border-radius:30px;
  background:linear-gradient(145deg,rgba(16,17,31,.98),rgba(7,8,16,.99));
  border:1px solid rgba(65,232,255,.18);
  box-shadow:0 38px 120px rgba(0,0,0,.68),0 0 55px rgba(139,92,246,.10);
}
.item-showcase-head-v28{
  position:sticky;
  top:0;
  z-index:7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(10,11,22,.9);
  backdrop-filter:blur(18px);
}
.item-showcase-head-v28 h2{
  margin:0;
  font-family:"Orbitron",sans-serif;
  font-size:clamp(1.05rem,3vw,1.45rem);
}
.item-showcase-layout-v28{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:20px;
  padding:20px;
}
.item-showcase-stage-v28{
  position:relative;
  min-height:520px;
  overflow:hidden;
  border-radius:26px;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 20%,rgba(65,232,255,.20),transparent 35%),
    radial-gradient(circle at 15% 75%,rgba(139,92,246,.24),transparent 34%),
    linear-gradient(160deg,#13182b 0%,#090b15 55%,#070811 100%);
  border:1px solid rgba(255,255,255,.08);
}
.item-showcase-stage-v28::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.36;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 92%);
}
.item-showcase-stage-v28::after{
  content:"";
  position:absolute;
  left:14%;right:14%;bottom:8%;height:14%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(65,232,255,.30),transparent 66%);
  filter:blur(12px);
  animation:showcaseFloorPulseV28 2.6s ease-in-out infinite;
}
@keyframes showcaseFloorPulseV28{50%{transform:scaleX(1.12);opacity:.6}}

.showcase-stars-v28 span{
  position:absolute;
  width:4px;height:4px;border-radius:50%;
  background:#8cf5ff;
  box-shadow:0 0 14px #41e8ff;
  animation:showcaseStarV28 3.5s ease-in-out infinite;
}
.showcase-stars-v28 span:nth-child(1){left:12%;top:18%;animation-delay:-.4s}
.showcase-stars-v28 span:nth-child(2){left:82%;top:22%;animation-delay:-1.3s}
.showcase-stars-v28 span:nth-child(3){left:72%;top:70%;animation-delay:-2.1s}
.showcase-stars-v28 span:nth-child(4){left:22%;top:74%;animation-delay:-2.8s}
@keyframes showcaseStarV28{50%{opacity:.2;transform:scale(.45)}}

.roblox-avatar-v28{
  position:absolute;
  left:50%;bottom:12%;
  width:220px;height:360px;
  transform:translateX(-50%);
  animation:avatarFloatV28 3s ease-in-out infinite;
  filter:drop-shadow(0 25px 28px rgba(0,0,0,.46));
}
@keyframes avatarFloatV28{50%{transform:translateX(-50%) translateY(-10px)}}
.roblox-avatar-v28 .head{
  position:absolute;left:66px;top:0;width:88px;height:88px;border-radius:18px;
  background:linear-gradient(145deg,#ffd28f,#e99f52);
  border:3px solid rgba(255,255,255,.18);
}
.roblox-avatar-v28 .head::before,.roblox-avatar-v28 .head::after{
  content:"";position:absolute;top:31px;width:8px;height:12px;border-radius:50%;background:#17131c
}
.roblox-avatar-v28 .head::before{left:25px}.roblox-avatar-v28 .head::after{right:25px}
.roblox-avatar-v28 .body{
  position:absolute;left:48px;top:96px;width:124px;height:140px;border-radius:18px 18px 12px 12px;
  background:linear-gradient(145deg,#41e8ff,#5266d9 65%,#8b5cf6);
  border:3px solid rgba(255,255,255,.12);
}
.roblox-avatar-v28 .arm,.roblox-avatar-v28 .leg{
  position:absolute;border-radius:16px;background:linear-gradient(145deg,#e9f2ff,#9ba9c5);
  border:3px solid rgba(255,255,255,.12)
}
.roblox-avatar-v28 .arm{top:106px;width:42px;height:142px}
.roblox-avatar-v28 .arm.left{left:0;transform:rotate(7deg)}
.roblox-avatar-v28 .arm.right{right:0;transform:rotate(-7deg)}
.roblox-avatar-v28 .leg{top:230px;width:55px;height:128px;background:linear-gradient(145deg,#303a59,#171d32)}
.roblox-avatar-v28 .leg.left{left:48px}.roblox-avatar-v28 .leg.right{right:48px}

.showcase-character-image-v28{
  position:absolute;
  inset:6% 7% 8%;
  width:86%;height:86%;
  object-fit:contain;
  border-radius:20px;
  display:none;
  filter:drop-shadow(0 30px 35px rgba(0,0,0,.55));
}
.item-showcase-stage-v28.has-character-preview .showcase-character-image-v28{display:block}
.item-showcase-stage-v28.has-character-preview .roblox-avatar-v28{display:none}

.showcase-accessory-v28{
  position:absolute;
  z-index:4;
  width:min(38%,210px);
  aspect-ratio:1;
  object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.52)) drop-shadow(0 0 22px rgba(65,232,255,.18));
  transform-origin:center;
  pointer-events:none;
}
.showcase-accessory-v28.position-head{left:50%;top:5%;transform:translateX(-50%)}
.showcase-accessory-v28.position-back{right:5%;top:31%}
.showcase-accessory-v28.position-side{right:4%;bottom:9%}
.item-showcase-stage-v28.has-character-preview .showcase-accessory-v28{
  width:min(24%,130px);right:3%;bottom:3%;top:auto;left:auto;
  padding:8px;border-radius:18px;background:rgba(7,9,18,.70);border:1px solid rgba(255,255,255,.10)
}
.showcase-accessory-v28.motion-float{animation:accessoryFloatV28 2.4s ease-in-out infinite}
.showcase-accessory-v28.motion-spin{animation:accessorySpinV28 5.5s linear infinite}
.showcase-accessory-v28.motion-pulse{animation:accessoryPulseV28 1.8s ease-in-out infinite}
.showcase-accessory-v28.motion-orbit{animation:accessoryOrbitV28 4.6s ease-in-out infinite}
@keyframes accessoryFloatV28{50%{translate:0 -14px;rotate:3deg}}
@keyframes accessorySpinV28{to{rotate:360deg}}
@keyframes accessoryPulseV28{50%{scale:1.12;filter:drop-shadow(0 22px 28px rgba(0,0,0,.55)) drop-shadow(0 0 32px rgba(139,92,246,.35))}}
@keyframes accessoryOrbitV28{25%{translate:10px -12px;rotate:5deg}50%{translate:0 -20px;rotate:0}75%{translate:-10px -12px;rotate:-5deg}}
.showcase-character-image-v28.motion-float{animation:characterKenBurnsV28 6s ease-in-out infinite alternate}
.showcase-character-image-v28.motion-spin{animation:characterTiltV28 4s ease-in-out infinite}
.showcase-character-image-v28.motion-pulse{animation:characterPulseV28 2.8s ease-in-out infinite}
.showcase-character-image-v28.motion-orbit{animation:characterKenBurnsV28 5s ease-in-out infinite alternate}
@keyframes characterKenBurnsV28{to{transform:scale(1.035) translateY(-5px)}}
@keyframes characterTiltV28{50%{transform:perspective(900px) rotateY(4deg) rotateX(-2deg)}}
@keyframes characterPulseV28{50%{transform:scale(1.025)}}

.item-showcase-info-v28{
  display:flex;flex-direction:column;gap:14px;
  padding:8px 4px 4px;
}
.item-showcase-chip-v28{align-self:flex-start;padding:8px 11px;border-radius:999px;background:rgba(65,232,255,.08);border:1px solid rgba(65,232,255,.18);color:#8cf5ff;font-size:.72rem;font-weight:900;letter-spacing:.08em}
.item-showcase-info-v28 h3{margin:0;font-family:"Orbitron",sans-serif;font-size:clamp(1.55rem,4vw,2.35rem);line-height:1.05}
.item-showcase-desc-v28{margin:0;color:var(--muted);line-height:1.75}
.item-showcase-price-v28{padding:16px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.item-showcase-price-v28 span{display:block;color:var(--muted);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.item-showcase-price-v28 strong{font-family:"Orbitron",sans-serif;font-size:1.55rem}
.item-showcase-note-v28{padding:12px 14px;border-radius:16px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.18);color:#d8ccff;font-size:.82rem;line-height:1.6}
.item-showcase-actions-v28{display:grid;gap:10px;margin-top:auto}

.character-preview-editor-v28{padding:14px;border-radius:18px;border:1px solid rgba(139,92,246,.18);background:rgba(139,92,246,.045)}
.character-preview-editor-v28 .editor-file-note{margin-top:7px}
.character-preview-thumb-v28{margin-top:10px;width:100%;max-height:220px;object-fit:contain;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);display:none}

@media(max-width:780px){
  .item-showcase-layout-v28{grid-template-columns:1fr;padding:14px}
  .item-showcase-stage-v28{min-height:430px}
  .item-showcase-info-v28{padding:2px 2px 10px}
  .roblox-avatar-v28{transform:translateX(-50%) scale(.88);transform-origin:bottom center}
  @keyframes avatarFloatV28{50%{transform:translateX(-50%) scale(.88) translateY(-9px)}}
}
@media(prefers-reduced-motion:reduce){
  .item-showcase-stage-v28 *,
  .item-showcase-stage-v28::after{animation:none!important}
}