body { background:#041218; color:#dff7ff; font-family:'Poppins',sans-serif; }
.wrap { max-width: 980px; margin: 16px auto; padding: 10px; }
.mbox-stage { position:relative; background:#06141a; border:1px solid #0d2a36; border-radius:14px; padding: clamp(14px, 4vw, 26px); overflow:hidden; box-shadow:inset 0 10px 30px rgba(0,0,0,.5), inset 0 0 60px rgba(0,150,255,.06); }
.mbox-stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, rgba(68,199,255,.12) 0%, rgba(0,0,0,0) 60%); }
.mbox-portal { position:relative; width:100%; max-width:820px; height: clamp(380px, 70vw, 540px); margin: 0 auto; border-radius:22px; background:linear-gradient(180deg, rgba(8,34,44,.94), rgba(6,20,26,.94)); box-shadow: 0 0 80px rgba(60,200,255,.16) inset, 0 0 0 1px rgba(68,199,255,.20) inset; overflow:hidden; }
.mbox-portal::before { content:""; position:absolute; inset:-25%; background:conic-gradient(from 0deg, rgba(68,199,255,.08), rgba(0,0,0,0) 20%, rgba(68,199,255,.08) 40%, rgba(0,0,0,0) 60%, rgba(68,199,255,.08) 80%, rgba(0,0,0,0) 100%); animation: mbox-sweep 6s linear infinite; filter: blur(18px); opacity:.6; }
.mbox-aura { position:absolute; inset:0; box-shadow: inset 0 0 160px rgba(68,199,255,.24), inset 0 0 0 1px rgba(68,199,255,.22); border-radius:22px; animation: mbox-flicker 1.6s ease-in-out infinite; }
.mbox-title { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font: 800 clamp(24px, 7vw, 42px) 'Orbitron', sans-serif; letter-spacing:1px; color:#9fe9ff; text-shadow: 0 0 18px rgba(120,220,255,.6), 0 0 42px rgba(120,220,255,.35); opacity:0; transition: opacity .25s ease-out; pointer-events:none; }
.mbox-portal.idle .mbox-title { opacity:1; }
.mbox-slot { position:absolute; inset: clamp(12px, 4vw, 28px); display:flex; align-items:center; justify-content:center; }
/* Keep the logo visible until the portal opens */
.mbox-portal.idle .mbox-slot { display:none; }
.mbox-card {
  --slot-left: 20.5%;
  --slot-top: 29.5%;
  --slot-width: 59%;
  --slot-height: 57%;
  position:relative;
  width: clamp(300px, 60vw, 460px);
  height: clamp(300px, 60vw, 460px);
  border-radius:16px;
  background:linear-gradient(180deg,#07202a,#0a2e3b);
  border:1px solid #0e3a4a;
  box-shadow: 0 16px 42px rgba(0,0,0,.45), 0 0 80px rgba(68,199,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transform: translateY(-16px) translateZ(0);
}
.mbox-card img {
  position:absolute;
  left:var(--slot-left);
  top:var(--slot-top);
  width:var(--slot-width);
  height:var(--slot-height);
  object-fit:contain;
  object-position:center;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.7));
  z-index:1;
}
.mbox-card.preframed img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.mbox-card::after { content:""; position:absolute; inset:0; background-repeat:no-repeat; background-position:center; background-size:contain; pointer-events:none; z-index:3; }
.mbox-card.frame-kit {
  --slot-left: 22%;
  --slot-top: 30.5%;
  --slot-width: 56.5%;
  --slot-height: 55.5%;
}
.mbox-card.frame-item {
  --slot-left: 20%;
  --slot-top: 29%;
  --slot-width: 60%;
  --slot-height: 58%;
}
.mbox-card.frame-kit::after { background-image:url('/assets/png/KIT.png'); }
.mbox-card.frame-item::after { background-image:url('/assets/png/ITEM.png'); }
/* Fallback label when no image is available */
.mbox-card.noimg { display:flex; align-items:center; justify-content:center; }
.mbox-card-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:12px; color:#9fe9ff; font-weight:800; text-align:center; text-shadow: 0 2px 8px rgba(0,0,0,.6); pointer-events:none; z-index:4; }
.mbox-card.win { box-shadow: 0 0 0 2px #44c7ff, 0 0 30px rgba(68,199,255,.85), 0 16px 40px rgba(0,0,0,.55); border-color:#44c7ff; animation: mbox-win 900ms ease-out; }

.rw-thumb { position:relative; width:28px; height:28px; border-radius:4px; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:rgba(0,0,0,.2); }
.rw-thumb img { width:100%; height:100%; object-fit:cover; border-radius:4px; }
.rw-thumb::after { content:""; position:absolute; inset:0; background-repeat:no-repeat; background-position:center; background-size:contain; pointer-events:none; }
.rw-thumb.rw-thumb-kit::after { background-image:url('/assets/png/KIT.png'); }
.rw-thumb.rw-thumb-item::after { background-image:url('/assets/png/ITEM.png'); }
.mbox-wisps { position:absolute; inset:0; pointer-events:none; }
.mbox-wisps span { position:absolute; width:6px; height:18px; border-radius:3px; background:linear-gradient(180deg, rgba(113,224,255,.9), rgba(113,224,255,0)); filter: blur(1px); opacity:.25; animation: mbox-wisp 3.2s ease-in infinite; }
.mbox-flames { position:absolute; left:0; right:0; bottom:0; height:40%; pointer-events:none; opacity:0; transition: opacity .25s ease-out; }
.mbox-portal.open .mbox-flames { opacity:1; }
@keyframes mbox-flame { 0%{ transform: translateY(0) scale(1) rotate(0deg); opacity:.55; } 60%{ opacity:.8; } 100%{ transform: translateY(-40px) scale(1.1) rotate(-4deg); opacity:0; } }
@keyframes mbox-wisp { 0%{ transform: translateY(100%) translateX(0) scale(.9); opacity:0; } 10%{opacity:.25;} 100%{ transform: translateY(-20%) translateX(-20px) scale(1.1); opacity:0; } }
@keyframes mbox-sweep { to { transform: rotate(360deg); } }
@keyframes mbox-flicker { 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.05); } }
@keyframes mbox-win { 0%{ filter:brightness(1) } 30%{ filter:brightness(1.25) } 100%{ filter:brightness(1) } }
.mbox-banner { position:absolute; left:0; right:0; bottom:0; height: clamp(56px, 10vw, 84px); background: linear-gradient(180deg, rgba(4,18,24,.15), rgba(4,18,24,.85)); border-top:1px solid rgba(68,199,255,.25); box-shadow: 0 -10px 36px rgba(0,0,0,.38) inset, 0 0 24px rgba(68,199,255,.12) inset; overflow:hidden; display:none; }
.mbox-portal.open .mbox-banner { display:block; }
.mbox-marquee { position:absolute; inset:0; overflow:hidden; }
.mbox-marquee-track { display:flex; align-items:center; height:100%; gap: clamp(40px, 10vw, 80px); will-change:transform; animation: mbox-marquee 12s linear infinite; padding-left:100%; }
@keyframes mbox-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.mbox-banner .item { font: 800 clamp(16px, 5vw, 22px) 'Poppins', sans-serif; color:#dff7ff; text-shadow: 0 2px 6px rgba(0,0,0,.6); white-space:nowrap; }
.mbox-banner .qty { margin-left:10px; padding:4px 10px; border-radius:12px; background:#8fe4ff; color:#03212a; font: 800 clamp(12px, 4vw, 16px) 'Poppins', sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.mbox-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center; margin-top: clamp(8px, 3vw, 12px); }
.mbox-tickets { font-size:12px; color:#9fd6ff; width:100%; text-align:center; }
.mbox-result { margin-top:10px; font-size:14px; color:#ccefff; text-align:center; }
.mbox-btn[disabled] { opacity:.7; pointer-events:none; }
@keyframes mbox-confetti { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity:1; } 100% { transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--rot, 540deg)); opacity:0; } }
.mbox-confetti-piece { position:absolute; top:50%; left:50%; width:8px; height:14px; border-radius:2px; opacity:.95; transform: translate3d(0,0,0); will-change: transform, opacity; animation: mbox-confetti var(--dur, 1200ms) ease-out forwards; box-shadow: 0 0 10px rgba(68,199,255,.35); }
/* Tiny head confetti */
@keyframes mbox-head-fall { 0% { transform: translate3d(0,0,0) rotate(0deg); opacity:1; } 100% { transform: translate3d(var(--dx, 0px), var(--dy, 240px), 0) rotate(var(--rot, 360deg)); opacity:0; } }
.mbox-confetti-head { position:absolute; width:var(--w,14px); height:var(--h,14px); opacity:.98; transform: translate3d(0,0,0); will-change: transform, opacity; animation: mbox-head-fall var(--dur, 1800ms) linear forwards; pointer-events:none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
@media (prefers-reduced-motion: reduce) {
  .mbox-marquee-track, .mbox-wisps span, .mbox-flames .flame, .mbox-aura { animation: none !important; }
}
/* Polished button styles */
.button { 
  flex: 1; 
  min-width: 160px;
  max-width: 240px;
  background: linear-gradient(180deg, #132f3c 0%, #08161c 100%); 
  color: #dff7ff; 
  border: 1px solid #1f4a5e; 
  border-top: 1px solid #2f6a85;
  border-radius: 6px; 
  padding: 16px 20px; 
  font-family: 'Orbitron', sans-serif;
  font-weight: 800; 
  font-size: 14px; 
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer; 
  box-shadow: 0 4px 0 #040e12, 0 8px 20px rgba(0,0,0,0.5); 
  transition: all 0.1s ease;
  text-align: center;
  position: relative;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.button:active:not([disabled]) {
  transform: translateY(4px);
  box-shadow: 0 0 0 #040e12, 0 0 10px rgba(0,0,0,0.5);
}
.button.primary { 
  background: linear-gradient(180deg, #44c7ff 0%, #0077b3 100%);
  color: #03212a; 
  border-color: #71e0ff;
  border-bottom-color: #005f8f;
  box-shadow: 0 4px 0 #004263, 0 0 30px rgba(68,199,255,0.4);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.button.god { 
  background: linear-gradient(180deg, #ffd84a 0%, #d4a000 100%);
  color: #3d2c00; 
  border-color: #ffeaa8;
  border-bottom-color: #b38600;
  box-shadow: 0 4px 0 #8f6b00, 0 0 30px rgba(255,216,74,0.4);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.button[disabled] { filter: grayscale(1) opacity(0.5); cursor: not-allowed; transform:none; }
.button.primary:hover:not([disabled]) { filter: brightness(1.1); }
.button.god:hover:not([disabled]) { filter: brightness(1.1); }
/* Button polish and accessibility */
.button { transition: filter .15s ease, box-shadow .15s ease, transform .06s ease; }
.button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.button:active { transform: translateY(0); filter: brightness(1); }
.button:focus-visible { outline:2px solid #44c7ff; outline-offset:2px; }
.button.god:focus-visible { outline-color:#ffd84a; }
.mbox-btn[disabled] { opacity:.7; pointer-events:none; filter: grayscale(.15) brightness(.96); }
.mbox-portal.god .mbox-aura { box-shadow: inset 0 0 160px rgba(255,216,74,.28), inset 0 0 0 1px rgba(255,216,74,.24); }
.mbox-portal.god .mbox-card.win { box-shadow: 0 0 0 2px #ffd84a, 0 0 34px rgba(255,216,74,.85), 0 16px 40px rgba(0,0,0,.55); border-color:#ffd84a; }
.mbox-portal.god .mbox-banner { border-top-color: rgba(255,216,74,.35); box-shadow: 0 -10px 36px rgba(0,0,0,.38) inset, 0 0 24px rgba(255,216,74,.18) inset; }
/* God Roll announcement */
.mbox-announce { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: clamp(2px, 1.2vw, 6px); letter-spacing:2px; font: 800 clamp(26px, 8vw, 48px) 'Orbitron', sans-serif; color:#ffe16a; text-shadow: 0 0 24px rgba(255,216,74,.8), 0 0 48px rgba(255,216,74,.55); opacity:0; pointer-events:none; }
.mbox-announce.show { animation: god-announce 900ms ease-out forwards; }
@keyframes god-announce { 0% { opacity:0; transform: scale(.96); filter: brightness(1); } 50% { opacity:1; filter: brightness(1.08); } 100% { opacity:1; transform: scale(1); filter: brightness(1); } }