/* Northline roulette polish layer. Loaded after the main stylesheet. */
.case-modal-card {
  border-radius: 28px;
  border-color: rgba(186, 225, 112, .34);
  background:
    radial-gradient(circle at 50% 42%, rgba(92, 126, 74, .10), transparent 42%),
    linear-gradient(145deg, #141e18, #0d1511 72%);
}

.server-strip[hidden],
.hero-stats [hidden] { display: none !important; }

.modal-case .reel-viewport {
  border-radius: 16px;
  border-color: rgba(190, 224, 132, .34);
  background: rgba(7, 13, 10, .74);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .72), 0 12px 32px rgba(0, 0, 0, .18);
}

.modal-case .reel-pointer {
  border-left-width: 11px;
  border-right-width: 11px;
  border-top-width: 18px;
  border-top-color: #f4f8ed;
  filter: drop-shadow(0 2px 6px rgba(213, 243, 91, .24));
}

.case-modal .modal-case .reel-pointer:after {
  left: -1px;
  width: 2px;
  height: 175px;
  top: 0;
  background: linear-gradient(to bottom, rgba(244, 248, 237, .54), rgba(213, 243, 91, .18) 64%, transparent);
  box-shadow: 0 0 7px rgba(213, 243, 91, .24);
  opacity: .68;
}

.case-modal .modal-case .reel-glow {
  height: 1px;
  left: 16%;
  right: 16%;
  opacity: .16;
  border-radius: 999px;
  box-shadow: 0 0 7px rgba(213, 243, 91, .25);
}

/* The preview reel is 148px tall; continue the guide to its lower edge. */
.preview-case .reel-pointer:after { height: 139px; }

.modal-case .reel-card {
  border-radius: 14px;
  border-color: rgba(190, 224, 132, .20);
  background: linear-gradient(160deg, rgba(33, 48, 37, .96), rgba(13, 21, 16, .96));
}

.reel-track {
  transition: transform 6.6s cubic-bezier(.12, .74, .16, 1);
}

.modal-case .reel-track { transition-duration: 6.6s; }

@media (prefers-reduced-motion: reduce) {
  .reel-track { transition-duration: .01ms !important; }
  .preview-case .reel-track { animation: none !important; }
}

@media (max-width: 560px) {
  .topbar { padding: 0 12px; gap: 10px; }
  .brand { gap: 7px; font-size: 15px; letter-spacing: .8px; }
  .brand-mark { width: 25px; height: 25px; font-size: 17px; }
  .account-area { gap: 5px; min-width: 0; }
  .wallet, .topup-button { display: none; }
  .inventory-button { padding: 7px 8px; font-size: 10px; white-space: nowrap; }
  .login-button { max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 8px; font-size: 10px; }
  .login-button span { margin-left: 3px; }
  .section { padding-left: 14px; padding-right: 14px; }
  .product-grid { gap: 10px; }
  .product-card { min-height: 0; border-radius: 13px; }
  .product-art { height: 84px; border-radius: 13px 13px 0 0; font-size: 35px; }
  .product-info { padding: 11px 10px 10px; gap: 5px; }
  .product-info h3 { font-size: 17px; line-height: 1; }
  .product-info p { font-size: 9px; line-height: 1.3; }
  .product-buy { padding-top: 4px; }
  .price { font-size: 16px; }
  .buy { padding: 7px 8px; font-size: 9px; }
  .case-modal { padding: 10px; }
  .case-modal-card { width: 100%; padding: 28px 16px 24px; border-radius: 21px; }
  .case-modal-card h2 { font-size: 38px; }
  .modal-case .reel-viewport { height: 172px; }
  .modal-case .reel-card { height: 140px; min-width: 122px; width: 122px; }
  .case-modal .modal-case .reel-pointer:after { height: 148px; }
  .case-modal .modal-case .reel-glow { top: 198px; }
  .preview-case .reel-pointer:after { height: 115px; }
}

/* Minimal marker: the triangle alone is the visual focus. */
.reel-pointer:after,
.reel-glow { display: none !important; }
.reel-pointer {
  filter: drop-shadow(0 3px 7px rgba(213,243,91,.36));
}