/* GoldenBall 텔레그램 위젯 스타일 (자립적, 외부 의존 없음) */

.gb-tg-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
  box-shadow: 0 6px 18px rgba(34, 158, 217, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.gb-tg-fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 22px rgba(34, 158, 217, 0.6);
}

.gb-tg-fab:active {
  transform: translateY(0) scale(0.98);
}

.gb-tg-fab--disabled {
  background: linear-gradient(135deg, #5a6472 0%, #454d59 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0.6;
  cursor: not-allowed;
}

.gb-tg-fab--disabled:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 프로필용 링크 버튼 */
.gb-tg-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(34, 158, 217, 0.5);
  border-radius: 10px;
  color: #eaf6fd;
  background: linear-gradient(135deg, rgba(42, 171, 238, 0.18), rgba(34, 158, 217, 0.1));
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.gb-tg-link:hover {
  background: linear-gradient(135deg, rgba(42, 171, 238, 0.3), rgba(34, 158, 217, 0.18));
  border-color: rgba(34, 158, 217, 0.8);
}

.gb-tg-link--disabled {
  color: #9aa4b0;
  border-color: rgba(120, 130, 145, 0.4);
  background: rgba(90, 100, 114, 0.15);
  opacity: 0.65;
  cursor: not-allowed;
}

.gb-tg-link--disabled:hover {
  background: rgba(90, 100, 114, 0.15);
  border-color: rgba(120, 130, 145, 0.4);
}

@media (max-width: 640px) {
  .gb-tg-fab {
    right: 14px;
    bottom: 76px; /* 모바일 하단 네비 회피 */
    width: 50px;
    height: 50px;
  }
}
/* ═══ AUTH LOADING OVERLAY — PREMIUM ═══ */

.auth-loading {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #0d0620 0%, #050010 50%, #000 100%);
  overflow: hidden;
}

@keyframes auth-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 배경 파티클 라인 ── */
.auth-loading::before,
.auth-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.auth-loading::before {
  width: 340px;
  height: 340px;
  border: 1px solid rgba(139, 92, 246, 0.08);
  animation: auth-ring-pulse 3s ease-in-out infinite;
}
.auth-loading::after {
  width: 480px;
  height: 480px;
  border: 1px solid rgba(99, 102, 241, 0.05);
  animation: auth-ring-pulse 3s ease-in-out infinite 1.5s;
}
@keyframes auth-ring-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50%       { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

/* ── 타이틀 ── */
.auth-loading__title {
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 8px;
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 48px;
  text-transform: uppercase;
}

/* ── 링 + 로고 래퍼 ── */
.auth-loading__ring-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 회전 링 */
.auth-loading__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #a78bfa;
  border-right-color: rgba(167, 139, 250, 0.3);
  animation: auth-spin 1.4s linear infinite;
}
.auth-loading__ring--outer {
  inset: -14px;
  border-width: 1px;
  border-top-color: #6366f1;
  border-right-color: transparent;
  border-bottom-color: rgba(99, 102, 241, 0.2);
  animation: auth-spin 2.2s linear infinite reverse;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

/* 공전하는 점 */
.auth-loading__orbit {
  position: absolute;
  inset: -14px;
  animation: auth-spin 2.2s linear infinite;
}
.auth-loading__orbit-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 8px #a78bfa, 0 0 16px rgba(167, 139, 250, 0.5);
}

/* 로고 */
.auth-loading__logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.7))
          drop-shadow(0 0 40px rgba(139, 92, 246, 0.4));
  animation: auth-logo-pulse 2.8s ease-in-out infinite;
}
@keyframes auth-logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(139,92,246,0.7)) drop-shadow(0 0 40px rgba(139,92,246,0.4)); }
  50%       { filter: drop-shadow(0 0 30px rgba(167,139,250,0.9)) drop-shadow(0 0 60px rgba(167,139,250,0.5)); }
}

/* ── 텍스트 ── */
.auth-loading__text {
  margin-top: 36px;
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 5px;
  color: rgba(167, 139, 250, 0.6);
  animation: auth-text-pulse 1.8s ease-in-out infinite;
}
@keyframes auth-text-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

/* ── 스캔 바 ── */
.auth-loading__scanbar {
  position: absolute;
  bottom: 48px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(139, 92, 246, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.auth-loading__scanbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #a78bfa, #6366f1, transparent);
  animation: auth-scan 1.6s ease-in-out infinite;
  border-radius: 2px;
}
@keyframes auth-scan {
  0%   { left: -40%; }
  100% { left: 140%; }
}
.wallet-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0e17;
  animation: walletGateFadeIn 0.5s ease;
  user-select: none;
  -webkit-user-select: none;
}

@keyframes walletGateFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.wallet-gate__card {
  text-align: center;
  padding: 40px 32px;
  max-width: 340px;
  width: 90%;
}

.wallet-gate__logo {
  width: 90px;
  height: 90px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.35);
  box-shadow:
    0 0 30px rgba(139, 92, 246, 0.2),
    0 0 60px rgba(139, 92, 246, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}

.wallet-gate__logo-img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  border-radius: 0;
}

.wallet-gate__title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: 1px;
}

.wallet-gate__subtitle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin: 0 0 32px;
}

.wallet-gate__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 24px;
  background: linear-gradient(135deg, #f6851b, #e2761b);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(246, 133, 27, 0.3);
  margin-bottom: 12px;
  letter-spacing: 0.25px;
}

.wallet-gate__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(246, 133, 27, 0.5);
}

.wallet-gate__btn:active {
  transform: translateY(0);
}

.wallet-gate__btn-icon {
  font-size: 20px;
  font-style: normal;
}

.wallet-gate__error {
  color: #ef4444;
  font-size: 12px;
  margin: 0 0 8px;
  background: rgba(239, 68, 68, 0.1);
  padding: 8px 12px;
  border-radius: 8px;
}

.wallet-gate__hint {
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  margin: 12px 0 0;
}

/* ─── Google 소셜 로그인 ─── */
.wallet-gate__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 12px;
}

.wallet-gate__divider span {
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  white-space: nowrap;
}

.wallet-gate__divider::before,
.wallet-gate__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.wallet-gate__google-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 288px;
  margin: 0 auto;
}

/* 공통 버튼 형태 — 아이콘 왼쪽 고정 / 라벨 중앙 / 배지 오른쪽 고정 */
.wallet-gate__google-btn,
.wallet-gate__email-btn,
.wallet-gate__fb-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0 46px;
  margin: 0;
  border: none;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.wallet-gate__btn-label {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}

.wallet-gate__google-btn {
  background: #ffffff;
  color: #1f1f1f;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
}

.wallet-gate__google-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.wallet-gate__google-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.wallet-gate__google-icon {
  position: absolute;
  left: 16px;
  flex-shrink: 0;
}

/* ─── [2026-07-10] Facebook / Email 로그인 버튼 ─── */
.wallet-gate__fb-btn {
  background: #1877f2;
  color: #fff;
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.35);
}
.wallet-gate__fb-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(24, 119, 242, 0.5);
}
.wallet-gate__fb-btn:active:not(:disabled) {
  transform: translateY(0);
}
.wallet-gate__fb-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.wallet-gate__fb-icon {
  position: absolute;
  left: 16px;
  flex-shrink: 0;
}
/* Facebook 백엔드 미설정 — 숨기지 않고 Coming Soon 배지로 비활성 표시 */
.wallet-gate__fb-btn--soon {
  background: #2a2f3a;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.55);
}
.wallet-gate__fb-btn--soon .wallet-gate__fb-icon rect {
  fill: rgba(255, 255, 255, 0.15);
}
.wallet-gate__fb-btn--soon .wallet-gate__fb-icon text {
  fill: rgba(255, 255, 255, 0.4);
}
.wallet-gate__soon-badge {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
/* 구글도 Coming Soon으로 막음 — 회색 비활성 + 배지 */
.wallet-gate__google-btn--soon {
  background: #2a2f3a !important;
  color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
.wallet-gate__google-btn--soon .wallet-gate__google-icon { opacity: 0.35; }

.wallet-gate__email-btn {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}
.wallet-gate__email-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5);
}
.wallet-gate__email-btn:active {
  transform: translateY(0);
}
.wallet-gate__email-icon {
  position: absolute;
  left: 16px;
  flex-shrink: 0;
}

.wallet-gate__back-link {
  display: block;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12.5px;
  cursor: pointer;
  padding: 0 0 12px;
  margin: 0;
  text-align: left;
  width: 100%;
  transition: color 0.15s;
}
.wallet-gate__back-link:hover {
  color: rgba(255, 255, 255, 0.75);
}

@keyframes wg-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── WalletSetup (비커스터디얼 지갑 생성) ─── */
.wallet-setup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #0a0e17;
  overflow-y: auto;
  padding: 24px 0;
}

.wallet-setup__card {
  text-align: center;
  padding: 32px 24px;
  max-width: 380px;
  width: 92%;
}

.wallet-setup__desc {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.wallet-setup__warning {
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 14px;
  margin-bottom: 20px;
  text-align: left;
}

.wallet-setup__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.wallet-setup__word {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.wallet-setup__word-num {
  color: rgba(255,255,255,0.3);
  font-size: 9px;
}

.wallet-setup__word-text {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.wallet-setup__address {
  background: rgba(0,212,170,0.08);
  border: 1px solid rgba(0,212,170,0.2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wallet-setup__address-label {
  color: rgba(255,255,255,0.4);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.wallet-setup__address-val {
  color: #00d4aa;
  font-size: 13px;
  font-family: monospace;
}

.wallet-setup__copy-btn {
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: all 0.2s;
}

.wallet-setup__copy-btn:hover {
  background: rgba(255,255,255,0.1);
}

.wallet-setup__confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  margin-bottom: 20px;
  line-height: 1.5;
}

.wallet-setup__confirm-check input {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 퀴즈 */
.wallet-setup__quiz-item {
  margin-bottom: 16px;
  text-align: left;
}

.wallet-setup__quiz-label {
  display: block;
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.wallet-setup__quiz-input {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.wallet-setup__quiz-input:focus {
  border-color: rgba(0,212,170,0.5);
}

.wallet-setup__quiz-input.correct {
  border-color: #22c55e;
  background: rgba(34,197,94,0.08);
}

.wallet-setup__quiz-input.wrong {
  border-color: #ef4444;
  background: rgba(239,68,68,0.08);
}

.wallet-setup__back-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  font-size: 12px;
  cursor: pointer;
  margin-top: 12px;
  padding: 8px;
}

.wallet-setup__back-btn:hover {
  color: rgba(255,255,255,0.6);
}

/* wallet-gate__btn disabled 상태 */
.wallet-gate__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* ── 초대코드 입력 ── */
.wallet-gate__invite-wrap {
  margin: 0 0 16px;
}
.wallet-gate__invite-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px 16px;
  color: #e2e8f0;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.wallet-gate__invite-input:focus {
  border-color: rgba(255,255,255,0.3);
}
.wallet-gate__invite-input::placeholder {
  color: rgba(255,255,255,0.3);
}
.wallet-gate__invite-hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  text-align: center;
}
.wallet-gate__invite-btn {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.wallet-gate__invite-btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.wallet-gate__invite-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wallet-gate__back-btn {
  margin-top: 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.15s;
}
.wallet-gate__back-btn:hover { color: rgba(255,255,255,0.7); }

/* ── In-App Browser Warning (NAVER, KakaoTalk, etc.) ── */
.wallet-gate__inapp-warn {
  text-align: center;
  padding: 8px 4px;
}
.wallet-gate__inapp-title {
  color: #f97316;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 12px;
}
.wallet-gate__inapp-msg {
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.wallet-gate__inapp-msg b {
  color: #fff;
}
.wallet-gate__inapp-copy {
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  margin: 12px 0 0;
}
.wallet-gate__inapp-copy b {
  color: #a855f7;
}

/* ── Invite Code Overlay (App.tsx — 신규 유저 초대코드 입력) ── */
.invite-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0e17;
  animation: walletGateFadeIn 0.3s ease;
}

.invite-overlay__card {
  text-align: center;
  padding: 40px 32px;
  max-width: 340px;
  width: 90%;
}

.invite-overlay__logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.35);
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.invite-overlay__logo-img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.invite-overlay__title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: 0.5px;
}

.invite-overlay__subtitle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin: 0 0 24px;
  line-height: 1.5;
}
/* =============================================
   GOLDEN BALL — 사이버펑크 디자인 시스템
   ============================================= */

/* === 1. Reset & Base === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-x pan-y;
}

html {
  /* 모바일 크롬(안드로이드) "가독성 자동확대(font boosting)"가 좁은 flex 안 작은 글씨를
     지정값보다 크게 렌더링 → 고정폭 라벨(로또 NEXT DRAW 등)이 예상보다 빨리 잘림. 비활성화. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  /* Core Colors */
  --gb-bg-primary: #050508;
  --gb-bg-secondary: #0a0a14;
  --gb-bg-card: rgba(10, 10, 20, 0.85);

  /* Neon Accents */
  --gb-cyan: #06b6d4;
  --gb-cyan-glow: rgba(6, 182, 212, 0.4);
  --gb-violet: #8b5cf6;
  --gb-violet-glow: rgba(139, 92, 246, 0.3);
  --gb-rose: #e11d48;
  --gb-emerald: #10b981;
  --gb-amber: #f59e0b;
  --gb-gold: #facc15;

  /* Team Colors */
  --gb-short-color: #ef4444;
  --gb-short-glow: rgba(239, 68, 68, 0.4);
  --gb-long-color: #22c55e;
  --gb-long-glow: rgba(34, 197, 94, 0.4);

  /* Text */
  --gb-text-primary: #e2e8f0;
  --gb-text-secondary: rgba(255, 255, 255, 0.5);
  --gb-text-muted: rgba(255, 255, 255, 0.3);

  /* Fonts */
  --gb-font-display: "Orbitron", monospace;
  --gb-font-body: "Outfit", sans-serif;

  /* Layout */
  --gb-header-h: 60px; /* [#5 2026-07-13] 헤더 상단 넓게 (52→60, 뷰포트 계산 연동) */
  --gb-nav-h: 64px;
  --gb-max-width: 430px;
}

/* === Global Keyframes === */

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.7;
    filter: brightness(1.3);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes border-glow {
  0%,
  100% {
    border-color: rgba(6, 182, 212, 0.3);
  }
  50% {
    border-color: rgba(6, 182, 212, 0.7);
  }
}

html,
body,
#root {
  height: 100%;
  width: 100%;
  overflow: hidden;
  touch-action: pan-x pan-y;
}

body {
  font-family: var(--gb-font-body);
  background: var(--gb-bg-primary);
  color: var(--gb-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Mobile: iOS zoom & input fix ===
   iOS Safari zooms when input font-size < 16px — force 16px minimum */
input,
textarea,
select {
  font-size: 16px !important;
}
/* range slider needs pan-x only */
input[type="range"] {
  touch-action: pan-x;
}
/* Prevent content shifting when virtual keyboard appears */
.app-shell {
  height: 100dvh;
}

/* === 2. App Shell === */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: var(--gb-max-width);
  margin: 0 auto;
  position: relative;
  overflow: clip;
  background: var(--gb-bg-primary);
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* === 3. Header === */
.app-header {
  height: var(--gb-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 5, 8, 0.9);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
  z-index: 100;
}

/* [2026-07-07] 로고 옆 로그인 이메일 칩 (탭 → 프로필) */
.app-header-email {
  margin-left: 10px;
  margin-right: auto; /* 로고 바로 옆 + 우측 요소는 오른쪽 유지 */
  max-width: 44vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: all 0.15s;
}
.app-header-email:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
  color: #fff;
}

/* [#1 2026-07-13] 헤더 시계 크게 */
/* [#2·#3] HH:MM:SS 잘림 방지(max-width/ellipsis 해제) + 잔액(13px)과 크기 정합 */
.app-header-clock {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 13px;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.3px;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  flex-shrink: 0;
}

/* [#3·#4 2026-07-13] 프로필 로그아웃 버튼 + 로그아웃 확인 팝업 */
.pp-logout-btn {
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  color: #f87171;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.pp-logout-btn:hover { background: rgba(239, 68, 68, 0.2); }
.pp-logout-btn:active { transform: scale(0.99); }

.pp-confirm-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px);
  padding: 24px;
}
.pp-confirm-modal {
  width: 100%; max-width: 320px;
  background: #12151d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 24px 20px 18px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.pp-confirm-title {
  font-size: 16px; font-weight: 700; color: #fff;
  margin-bottom: 20px; line-height: 1.4;
}
.pp-confirm-buttons { display: flex; gap: 10px; }
.pp-confirm-btn {
  flex: 1; padding: 12px; border-radius: 11px;
  font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
  border: none;
}
.pp-confirm-btn--no {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}
.pp-confirm-btn--no:hover { background: rgba(255, 255, 255, 0.14); }
.pp-confirm-btn--yes {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}
.pp-confirm-btn--yes:hover { filter: brightness(1.08); }

.app-logo {
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1.5px;
  line-height: 1.05;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    90deg,
    #fff 0%,
    var(--gb-cyan) 40%,
    var(--gb-gold) 60%,
    #fff 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: -300% center;
  }
  100% {
    background-position: 300% center;
  }
}

.header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--gb-text-secondary);
  font-family: var(--gb-font-display);
  letter-spacing: 1px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

/* GBP Balance Badge — 헤더 우측 */
.header-balance-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s;
}
.header-balance-badge:hover {
  background: rgba(249, 115, 22, 0.2);
  border-color: rgba(249, 115, 22, 0.4);
}
.header-gbp-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}
.header-balance-badge picture {
  display: flex;
  align-items: center;
}
.header-gbp-amount {
  font-family: "Orbitron", sans-serif;
  /* [#3] 헤더 시계(13px)와 크기 정합 — 11→13 */
  font-size: 13px;
  font-weight: 700;
  color: #f97316;
  letter-spacing: 0.5px;
}
/* GBP 잔액 낮음 — 배지 경고 상태 */
.header-balance-badge--low {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  animation: bbBetPulse 1s ease-in-out infinite alternate;
}
.header-balance-badge--low .header-gbp-amount {
  color: #f87171 !important;
}
.header-balance-badge__warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  border-radius: 50%;
  line-height: 1;
  flex-shrink: 0;
}

/* GBP 잔고 낮음 — 하단 WALLET 버튼 바로 위 floating */
.gbp-low-float {
  position: fixed;
  bottom: calc(var(--gb-nav-h) + 8px);
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(10,4,20,0.95);
  border: 1px solid rgba(239,68,68,0.6);
  border-radius: 20px;
  cursor: pointer;
  z-index: 200;
  box-shadow: 0 0 14px rgba(239,68,68,0.35);
  animation: bbBetPulse 1.2s ease-in-out infinite alternate;
  max-width: 220px;
}
.gbp-low-float__icon { font-size: 14px; flex-shrink: 0; }
.gbp-low-float__text {
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #f87171;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gbp-low-float__arrow {
  font-size: 12px;
  color: #f87171;
  flex-shrink: 0;
}

/* 로그아웃 버튼 */
.header-logout-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.header-logout-btn:hover {
  color: rgba(255,255,255,0.8);
}

/* 로그인 유저 아바타 */
.header-user-avatar {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(249,115,22,0.25);
  transition: box-shadow 0.2s;
}
.header-user-avatar:hover {
  box-shadow: 0 0 0 2px rgba(249,115,22,0.55);
}
.header-user-initial {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* 이메일 팝업 */
.header-user-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(10, 10, 20, 0.97);
  border: 1px solid rgba(249,115,22,0.35);
  border-radius: 10px;
  padding: 10px 14px;
  white-space: nowrap;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: popup-fade-in 0.15s ease;
}
@keyframes popup-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.header-user-popup-label {
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.header-user-popup-email {
  font-size: 13px;
  color: #f97316;
  font-weight: 500;
}
.header-user-switch-btn {
  margin-top: 8px;
  width: 100%;
  padding: 6px 0;
  background: rgba(249,115,22,0.12);
  border: 1px solid rgba(249,115,22,0.3);
  border-radius: 6px;
  color: #f97316;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.header-user-switch-btn:hover {
  background: rgba(249,115,22,0.25);
}

/* ── PIN / Biometric Gate ─────────────────────────────── */
.pin-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: radial-gradient(ellipse at center, #0d0620 0%, #050010 55%, #000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  padding: 32px 24px 40px;
}
.pin-logo { margin-bottom: 4px; }
.pin-logo-img { width: 56px; height: 56px; object-fit: contain; }
.pin-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: 1px;
}
.pin-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin: 0;
  text-align: center;
}
.pin-email {
  font-size: 17px;
  font-weight: 600;
  color: #f97316;
  margin: 0;
}
.pin-dots {
  display: flex;
  gap: 16px;
  margin: 8px 0 4px;
}
.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(249,115,22,0.5);
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.pin-dot.filled {
  background: #f97316;
  border-color: #f97316;
  box-shadow: 0 0 8px rgba(249,115,22,0.6);
}
.pin-dot.error {
  border-color: #ef4444;
}
.pin-error {
  font-size: 12px;
  color: #ef4444;
  margin: 0;
  text-align: center;
  min-height: 16px;
}
.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 280px;
  margin-top: 8px;
}
.pin-key {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.pin-key:active:not(:disabled) {
  background: rgba(249,115,22,0.25);
  transform: scale(0.92);
}
.pin-key--empty { background: transparent; border-color: transparent; cursor: default; }
.pin-key--del { font-size: 18px; color: rgba(255,255,255,0.6); }
.pin-key--bio { border-color: rgba(249,115,22,0.3); color: #f97316; }
.pin-key:disabled { opacity: 0.35; cursor: not-allowed; }
.pin-skip-btn {
  margin-top: 8px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
}
.pin-skip-btn:hover { color: rgba(255,255,255,0.6); }
.pin-skip-btn--danger { color: rgba(239,68,68,0.5); }
.pin-skip-btn--danger:hover { color: #ef4444; }
.pin-biometric-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, rgba(249,115,22,0.2), rgba(239,68,68,0.15));
  border: 1px solid rgba(249,115,22,0.4);
  border-radius: 12px;
  color: #f97316;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.pin-biometric-btn:hover { background: linear-gradient(135deg, rgba(249,115,22,0.35), rgba(239,68,68,0.25)); }

/* ── Security panel buttons (ProfilePage) ── */
.sec-btn {
  width: 100%;
  padding: 10px 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.sec-btn--primary {
  background: rgba(6,182,212,0.15);
  border: 1px solid rgba(6,182,212,0.35);
  color: #06b6d4;
}
.sec-btn--primary:hover { background: rgba(6,182,212,0.28); }
.sec-btn--danger {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  color: #ef4444;
}
.sec-btn--danger:hover { background: rgba(239,68,68,0.25); }
.sec-btn--bio {
  background: rgba(249,115,22,0.12);
  border: 1px solid rgba(249,115,22,0.3);
  color: #f97316;
}
.sec-btn--bio:hover { background: rgba(249,115,22,0.25); }
.sec-btn--gold {
  background: rgba(245,197,66,0.14);
  border: 1px solid rgba(245,197,66,0.4);
  color: #f5c542;
}
.sec-btn--gold:hover { background: rgba(245,197,66,0.26); }
.sec-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.header-bell {
  position: relative;
  background: none;
  border: none;
  color: var(--gb-text-secondary);
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}
.header-bell:hover {
  color: var(--gb-cyan);
}

.bell-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gb-rose);
  box-shadow: 0 0 6px var(--gb-rose);
}

.nav-label {
  font-size: 9px;
  /* [2026-07-09] 다국어 긴 라벨(パワーボール 등) 넘침/줄바꿈 방지 */
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Nav active icon glow */
.nav-item.active svg {
  filter: drop-shadow(0 0 4px var(--gb-cyan));
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gb-emerald);
  box-shadow: 0 0 8px var(--gb-emerald);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
/* ★ 네온 글로우 펄스 */
@keyframes neon-cyan {
  0%,
  100% {
    border-color: rgba(6, 182, 212, 0.25);
    box-shadow:
      0 0 4px rgba(6, 182, 212, 0.1),
      inset 0 1px 0 rgba(6, 182, 212, 0.06);
  }
  50% {
    border-color: rgba(6, 182, 212, 0.9);
    box-shadow:
      0 0 15px rgba(6, 182, 212, 0.6),
      0 0 40px rgba(6, 182, 212, 0.25),
      0 0 80px rgba(6, 182, 212, 0.1);
  }
}
@keyframes neon-purple {
  0%,
  100% {
    border-color: rgba(139, 92, 246, 0.25);
    box-shadow:
      0 0 4px rgba(139, 92, 246, 0.1),
      inset 0 1px 0 rgba(139, 92, 246, 0.06);
  }
  50% {
    border-color: rgba(139, 92, 246, 0.9);
    box-shadow:
      0 0 15px rgba(139, 92, 246, 0.6),
      0 0 40px rgba(139, 92, 246, 0.25),
      0 0 80px rgba(139, 92, 246, 0.1);
  }
}
@keyframes neon-short {
  0%,
  100% {
    border-color: rgba(248, 113, 113, 0.3);
    box-shadow:
      0 6px 24px rgba(185, 28, 28, 0.3),
      0 0 8px rgba(239, 68, 68, 0.15);
  }
  50% {
    border-color: rgba(248, 113, 113, 0.7);
    box-shadow:
      0 6px 28px rgba(185, 28, 28, 0.5),
      0 0 16px rgba(239, 68, 68, 0.4),
      0 0 40px rgba(239, 68, 68, 0.12);
  }
}
@keyframes neon-long {
  0%,
  100% {
    border-color: rgba(74, 222, 128, 0.3);
    box-shadow:
      0 6px 24px rgba(22, 163, 74, 0.3),
      0 0 8px rgba(34, 197, 94, 0.15);
  }
  50% {
    border-color: rgba(74, 222, 128, 0.7);
    box-shadow:
      0 6px 28px rgba(22, 163, 74, 0.5),
      0 0 16px rgba(34, 197, 94, 0.4),
      0 0 40px rgba(34, 197, 94, 0.12);
  }
}

/* ★ 네온 글로우 — 앰버/에메랄드 */
@keyframes neon-amber {
  0%,
  100% {
    border-color: rgba(245, 158, 11, 0.25);
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.1);
  }
  50% {
    border-color: rgba(245, 158, 11, 0.8);
    box-shadow:
      0 0 15px rgba(245, 158, 11, 0.5),
      0 0 40px rgba(245, 158, 11, 0.2);
  }
}
@keyframes neon-emerald {
  0%,
  100% {
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.1);
  }
  50% {
    border-color: rgba(16, 185, 129, 0.8);
    box-shadow:
      0 0 15px rgba(16, 185, 129, 0.5),
      0 0 40px rgba(16, 185, 129, 0.2);
  }
}

/* ★ 네온 글로우 펄스 애니메이션 */
@keyframes neon-cyan {
  0%,
  100% {
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow:
      0 0 6px rgba(6, 182, 212, 0.15),
      0 0 15px rgba(6, 182, 212, 0.05),
      inset 0 1px 0 rgba(6, 182, 212, 0.1),
      inset 0 -1px 0 rgba(6, 182, 212, 0.05);
  }
  50% {
    border-color: rgba(6, 182, 212, 0.7);
    box-shadow:
      0 0 12px rgba(6, 182, 212, 0.4),
      0 0 35px rgba(6, 182, 212, 0.15),
      0 0 60px rgba(6, 182, 212, 0.05),
      inset 0 1px 0 rgba(6, 182, 212, 0.25),
      inset 0 -1px 0 rgba(6, 182, 212, 0.15);
  }
}
@keyframes neon-purple {
  0%,
  100% {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow:
      0 0 6px rgba(139, 92, 246, 0.15),
      0 0 15px rgba(139, 92, 246, 0.05),
      inset 0 1px 0 rgba(139, 92, 246, 0.1),
      inset 0 -1px 0 rgba(139, 92, 246, 0.05);
  }
  50% {
    border-color: rgba(139, 92, 246, 0.7);
    box-shadow:
      0 0 12px rgba(139, 92, 246, 0.4),
      0 0 35px rgba(139, 92, 246, 0.15),
      0 0 60px rgba(139, 92, 246, 0.05),
      inset 0 1px 0 rgba(139, 92, 246, 0.25),
      inset 0 -1px 0 rgba(139, 92, 246, 0.15);
  }
}

/* === 4. Viewport (Page Content) === */
.app-viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.app-viewport::-webkit-scrollbar {
  display: none;
}

/* === 5. Bottom Navigation === */
.bottom-nav {
  height: var(--gb-nav-h);
  display: flex;
  align-items: center;
  background: rgba(10, 10, 18, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  margin: 0;
  padding: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
  position: relative;
  z-index: 100;
  overflow: visible;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--gb-font-display);
  transition: color 0.25s ease;
  text-decoration: none;
  position: relative;
}

.nav-item svg {
  transition: transform 0.25s ease, filter 0.25s ease;
}

.nav-item:hover {
  color: rgba(6, 182, 212, 0.7);
}

.nav-item.active {
  color: var(--gb-cyan);
}

.nav-item.active svg {
  filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.85));
}

.nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  background: var(--gb-cyan);
  border-radius: 3px;
  box-shadow: 0 0 10px var(--gb-cyan), 0 0 20px rgba(6, 182, 212, 0.4);
}

/* ── Battle bump (Niobe style) ── */
.battle-wrap {
  flex: 1.4;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  overflow: visible;
}

/* 왼쪽 오목 곡선 — nav 배경색으로 채워 concave 효과 */
.battle-wrap__curve-l {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-self: flex-start;
  background-image: radial-gradient(
    circle at 0% 0%,
    transparent 24px,
    rgba(10, 10, 18, 0.95) 24px
  );
}

/* 오른쪽 오목 곡선 */
.battle-wrap__curve-r {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-self: flex-start;
  background-image: radial-gradient(
    circle at 100% 0%,
    transparent 24px,
    rgba(10, 10, 18, 0.95) 24px
  );
}

/* Battle 버튼 — nav bar 위로 솟아오르는 bump */
.nav-item.battle-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 10px 4px 6px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--gb-font-display);
  background: rgba(10, 10, 18, 0.95);
  border-top-left-radius: 36px;
  border-top-right-radius: 36px;
  /* nav bar보다 24px 더 높게 → 위로 솟아오름 */
  height: calc(var(--gb-nav-h) + 24px);
  transition: color 0.25s ease;
}

.nav-item.battle-btn::after {
  display: none;
}

/* [2026-07-10] 가운데 볼록 = 로또: 목업 ◈ 보라→핑크 그라데이션으로 색만 오버라이드 */
.nav-item.battle-btn.lotto-center .nav-icon-wrap {
  background: linear-gradient(145deg, #9B7BFF, #FF3B5C);
  box-shadow: 0 6px 20px rgba(155, 123, 255, 0.45);
}
.nav-item.battle-btn.lotto-center:hover .nav-icon-wrap {
  box-shadow: 0 6px 28px rgba(155, 123, 255, 0.65);
}

.nav-item.battle-btn .nav-icon-wrap {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gb-rose), var(--gb-violet));
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(225, 29, 72, 0.5);
  transition: all 0.3s ease;
}

.nav-item.battle-btn:hover .nav-icon-wrap {
  box-shadow: 0 0 30px rgba(225, 29, 72, 0.7);
  transform: scale(1.06);
}

.nav-item.battle-btn.active .nav-icon-wrap {
  box-shadow:
    0 0 30px rgba(225, 29, 72, 0.8),
    0 0 60px rgba(139, 92, 246, 0.4);
}


/* === 6. Page Containers === */
.page {
  padding: 16px;
  min-height: 100%;
}

/* === 7. Glass Card === */
.glass-card {
  background: var(--gb-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(10px);
}

/* === 8. Section Title === */
.section-title {
  font-family: var(--gb-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gb-text-secondary);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* === 9. Matrix Rain Canvas === */
.matrix-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.12;
}

/* === 10. Battle-specific === */
.price-ticker {
  font-family: var(--gb-font-display);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
}

.price-change {
  font-family: var(--gb-font-display);
  font-size: 12px;
  font-weight: 700;
}

.price-change.up {
  color: var(--gb-long-color);
}
.price-change.down {
  color: var(--gb-short-color);
}

/* Power Bar */
.power-bar-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
}

.power-bar-short {
  height: 100%;
  background: linear-gradient(90deg, var(--gb-short-color), #f97316);
  transition: width 1s ease;
  border-radius: 4px 0 0 4px;
}

.power-bar-long {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4, var(--gb-long-color));
  transition: width 1s ease;
  border-radius: 0 4px 4px 0;
}

/* Bet Buttons */
.bet-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 10px;
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.bet-btn.short {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.2),
    rgba(249, 115, 22, 0.2)
  );
  color: var(--gb-short-color);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.bet-btn.short:hover {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.35),
    rgba(249, 115, 22, 0.35)
  );
  box-shadow: 0 0 25px var(--gb-short-glow);
}

.bet-btn.long {
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.2),
    rgba(34, 197, 94, 0.2)
  );
  color: var(--gb-long-color);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.bet-btn.long:hover {
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.35),
    rgba(34, 197, 94, 0.35)
  );
  box-shadow: 0 0 25px var(--gb-long-glow);
}

/* Amount Chips */
.amount-chip {
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--gb-text-secondary);
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.amount-chip:hover,
.amount-chip.active {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--gb-cyan);
  color: var(--gb-cyan);
}

/* Timer Ring */
.timer-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gb-font-display);
  font-size: 18px;
  font-weight: 900;
  position: relative;
}

.timer-ring.active {
  border-color: var(--gb-cyan);
  box-shadow: 0 0 15px var(--gb-cyan-glow);
  animation: timer-pulse 1s infinite;
}

@keyframes timer-pulse {
  0%,
  100% {
    box-shadow: 0 0 15px var(--gb-cyan-glow);
  }
  50% {
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.6);
  }
}

/* Slot Machine */
.slot-container {
  display: flex;
  gap: 4px;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.slot-reel {
  width: 90px;
  height: 120px;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 20, 0.9),
    rgba(20, 20, 40, 0.9)
  );
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.slot-reel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(5, 5, 8, 0.8), transparent);
  z-index: 2;
  pointer-events: none;
}

.slot-reel::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to top, rgba(5, 5, 8, 0.8), transparent);
  z-index: 2;
  pointer-events: none;
}

.slot-symbol {
  font-size: 40px;
  text-shadow: 0 0 10px currentColor;
}

.slot-reel.spinning .slot-symbol {
  animation: slot-spin 0.15s linear infinite;
}

@keyframes slot-spin {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* Price Chart Placeholder */
.chart-area {
  width: 100%;
  height: 180px;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 20, 0.6),
    rgba(5, 5, 8, 0.9)
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.chart-line {
  position: absolute;
  bottom: 20%;
  left: 0;
  width: 100%;
  height: 2px;
}

/* Round Result Overlay */
.round-result {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  z-index: 50;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.result-text {
  font-family: var(--gb-font-display);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 4px;
}

.result-text.win {
  color: var(--gb-long-color);
  text-shadow:
    0 0 30px var(--gb-long-glow),
    0 0 60px var(--gb-long-glow);
}

.result-text.lose {
  color: var(--gb-short-color);
  text-shadow: 0 0 30px var(--gb-short-glow);
}

/* Home Stats Cards */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 10px;
  color: var(--gb-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--gb-font-display);
}

.stat-value {
  font-family: var(--gb-font-display);
  font-size: 20px;
  font-weight: 900;
}

/* Utility */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-2 {
  gap: 8px;
}
.gap-3 {
  gap: 12px;
}
.gap-4 {
  gap: 16px;
}
.text-center {
  text-align: center;
}
.w-full {
  width: 100%;
}
.mt-2 {
  margin-top: 8px;
}
.mt-3 {
  margin-top: 12px;
}
.mt-4 {
  margin-top: 16px;
}
.mb-2 {
  margin-bottom: 8px;
}
.mb-3 {
  margin-bottom: 12px;
}

/* =============================================
   ARENA HUB
   ============================================= */
.arena-page {
  padding: 16px;
  padding-bottom: 80px;
  min-height: 100%;
}

.arena-header {
  text-align: center;
  margin-bottom: 20px;
}

.arena-title {
  font-family: var(--gb-font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff;
  margin-bottom: 4px;
}

.arena-icon {
  margin-right: 8px;
}

.arena-subtitle {
  font-size: 13px;
  color: var(--gb-text-secondary);
  margin-bottom: 16px;
}

.arena-stats-row {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background: var(--gb-bg-card);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.arena-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.arena-stat .stat-value {
  font-size: 14px;
}

.arena-stat .stat-label {
  font-size: 8px;
}

.glow-text {
  color: var(--gb-cyan);
  text-shadow: 0 0 10px var(--gb-cyan-glow);
}

.arena-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--gb-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: var(--gb-text-primary);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.game-card:hover {
  border-color: var(--gb-cyan);
  box-shadow: 0 0 20px var(--gb-cyan-glow);
  transform: translateY(-2px);
}

.game-card-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--gb-font-display);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #000;
}

.game-card-icon {
  font-size: 32px;
}

.game-card-title {
  font-family: var(--gb-font-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
}

.game-card-desc {
  font-size: 12px;
  color: var(--gb-text-secondary);
}

.game-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.game-edge {
  font-family: var(--gb-font-display);
  font-size: 10px;
  color: var(--gb-text-muted);
}

.game-play-btn {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--gb-cyan);
  letter-spacing: 1px;
}

/* =============================================
   공통 미니게임 스타일
   ============================================= */
.minigame-page {
  padding: 12px;
  padding-bottom: 40px;
  min-height: 100%;
}

.minigame-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.minigame-header h1 {
  font-family: var(--gb-font-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
}

.back-btn {
  font-family: var(--gb-font-display);
  font-size: 10px;
  color: var(--gb-text-secondary);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s;
}

.back-btn:hover {
  border-color: var(--gb-cyan);
  color: var(--gb-cyan);
}

.balance-display {
  font-family: var(--gb-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--gb-gold);
}

.amount-chips {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.chip {
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--gb-text-secondary);
  font-family: var(--gb-font-display);
  font-size: 11px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gb-text-secondary);
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.flip-btn.flip-short.selected {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--gb-short-color);
  color: var(--gb-short-color);
  box-shadow: 0 0 15px var(--gb-short-glow);
}

.flip-btn.flip-long.selected {
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--gb-long-color);
  color: var(--gb-long-color);
  box-shadow: 0 0 15px var(--gb-long-glow);
}

.flip-arrow {
  font-size: 20px;
}

.flip-go-btn {
  padding: 12px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gb-cyan), var(--gb-violet));
  border: none;
  color: #fff;
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 15px var(--gb-cyan-glow);
}

.flip-go-btn:hover {
  transform: scale(1.05);
}
.flip-go-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.flip-history h3 {
  font-family: var(--gb-font-display);
  font-size: 10px;
  color: var(--gb-text-muted);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--gb-font-display);
  font-size: 11px;
}

.h-win {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.15);
}
.h-lose {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
}
.h-plus {
  color: var(--gb-long-color);
}
.h-minus {
  color: var(--gb-short-color);
}
.history-empty {
  color: var(--gb-text-muted);
  font-size: 12px;
  text-align: center;
}

/* =============================================
   COIN FLIP — 3D 코인 + 프리미엄 아레나
   ============================================= */
.coinflip-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Game Navigation */
.game-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 4px;
}
.game-nav__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-nav__btn:hover {
  border-color: var(--gb-cyan);
  color: var(--gb-cyan);
  background: rgba(6, 182, 212, 0.1);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
}
.game-nav__label {
  font-family: var(--gb-font-display);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 2px;
}

/* Side Icon Colors */
.cf-side__icon--short {
  color: #f87171;
  text-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
}
.cf-side__icon--long {
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

.coinflip-arena {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  perspective: 800px;
  margin: 8px 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(139, 92, 246, 0.08) 0%,
    transparent 60%
  );
}
.coin-3d {
  width: 160px;
  height: 160px;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.1s linear;
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.2));
}
.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  border: 3px solid;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.6),
    inset 0 -4px 12px rgba(0, 0, 0, 0.3),
    inset 0 4px 12px rgba(255, 255, 255, 0.15);
}
.coin-front {
  background: linear-gradient(145deg, #dc2626 0%, #991b1b 60%, #7f1d1d 100%);
  border-color: rgba(248, 113, 113, 0.5);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.coin-back {
  background: linear-gradient(145deg, #1d4ed8 0%, #1e40af 60%, #1e3a8a 100%);
  border-color: rgba(96, 165, 250, 0.5);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.coin-symbol {
  font-size: 32px;
  opacity: 0.9;
}
.coin-win {
  animation: coin-glow-win 0.5s ease-out;
}
.coin-lose {
  animation: coin-glow-lose 0.5s ease-out;
}
@keyframes coin-glow-win {
  0% {
    filter: drop-shadow(0 0 20px rgba(34, 197, 94, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 40px rgba(34, 197, 94, 0.4));
  }
}
@keyframes coin-glow-lose {
  0% {
    filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 40px rgba(239, 68, 68, 0.4));
  }
}

/* 결과 오버레이 - 풀스크린 대형 */
.flip-result {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  animation: result-fade 0.3s ease;
}
@keyframes result-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.result-text {
  font-family: var(--gb-font-display);
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 6px;
  text-shadow: 0 0 40px currentColor;
  animation: result-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.result-win .result-text {
  color: #22c55e;
}
.result-lose .result-text {
  color: #ef4444;
}
.result-side {
  font-family: var(--gb-font-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 4px;
  margin-top: 8px;
}
.result-win .result-side {
  color: #4ade80;
}
.result-lose .result-side {
  color: #f87171;
}
.result-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--gb-font-display);
  font-size: 16px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 16px;
}
.result-bonus {
  font-family: var(--gb-font-display);
  font-size: 14px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 16px rgba(251, 191, 36, 0.6);
  margin-top: 8px;
  animation: result-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes result-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 스트릭 배너 */
.streak-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.12) 0%,
    rgba(245, 158, 11, 0.06) 100%
  );
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 10px;
  font-family: var(--gb-font-display);
  font-size: 14px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
  animation: streak-pulse 1.5s ease-in-out infinite;
}
.streak-fire {
  font-size: 18px;
  color: #f97316;
  animation: fire-glow 0.8s ease-in-out infinite alternate;
}
.streak-mult {
  font-size: 18px;
  color: #fbbf24;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.8);
}
@keyframes streak-pulse {
  0%,
  100% {
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.15);
  }
  50% {
    box-shadow: 0 0 24px rgba(251, 191, 36, 0.3);
  }
}
@keyframes fire-glow {
  0% {
    text-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
  }
  100% {
    text-shadow: 0 0 20px rgba(249, 115, 22, 0.9);
  }
}

/* 컨트롤 영역 */
.coinflip-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 사이드 선택 */
.cf-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cf-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 0;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.cf-side:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cf-side__icon {
  font-size: 28px;
}
.cf-side__label {
  font-family: var(--gb-font-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
}

/* SHORT 선택 */
.cf-side--short.cf-side--active {
  background: linear-gradient(
    145deg,
    rgba(239, 68, 68, 0.15) 0%,
    rgba(185, 28, 28, 0.08) 100%
  );
  border-color: rgba(248, 113, 113, 0.5);
  box-shadow:
    0 0 20px rgba(239, 68, 68, 0.15),
    inset 0 0 20px rgba(239, 68, 68, 0.05);
}
.cf-side--short.cf-side--active .cf-side__label {
  color: #f87171;
  text-shadow: 0 0 12px rgba(248, 113, 113, 0.5);
}

/* LONG 선택 */
.cf-side--long.cf-side--active {
  background: linear-gradient(
    145deg,
    rgba(34, 197, 94, 0.15) 0%,
    rgba(22, 163, 74, 0.08) 100%
  );
  border-color: rgba(74, 222, 128, 0.5);
  box-shadow:
    0 0 20px rgba(34, 197, 94, 0.15),
    inset 0 0 20px rgba(34, 197, 94, 0.05);
}
.cf-side--long.cf-side--active .cf-side__label {
  color: #4ade80;
  text-shadow: 0 0 12px rgba(74, 222, 128, 0.5);
}

.cf-side:hover:not(:disabled):not(.cf-side--active) {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
}

/* FLIP 버튼 */
.cf-flip-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 0;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, var(--gb-cyan) 0%, var(--gb-violet) 100%);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 20px rgba(6, 182, 212, 0.25),
    0 0 40px rgba(139, 92, 246, 0.1);
}
.cf-flip-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 50%
  );
  border-radius: inherit;
  pointer-events: none;
}
.cf-flip-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 8px 30px rgba(6, 182, 212, 0.35),
    0 0 60px rgba(139, 92, 246, 0.15);
}
.cf-flip-btn:active:not(:disabled) {
  transform: scale(0.97);
}
.cf-flip-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.cf-flip-btn__text {
  font-family: var(--gb-font-display);
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 4px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.cf-flip-btn__sub {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 1px;
}
.cf-flip-btn--spinning {
  animation: flip-pulse 0.6s ease-in-out infinite;
}
@keyframes flip-pulse {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.25);
  }
  50% {
    box-shadow:
      0 4px 40px rgba(6, 182, 212, 0.5),
      0 0 60px rgba(139, 92, 246, 0.3);
  }
}

/* =============================================
   PRIZE BLOCK
   ============================================= */
.pb-timer {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.pb-timer-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gb-cyan), var(--gb-violet));
  border-radius: 3px;
  transition: width 0.1s linear;
}

.pb-timer-text {
  position: absolute;
  right: 4px;
  top: -18px;
  font-family: var(--gb-font-display);
  font-size: 11px;
  color: var(--gb-cyan);
}

.pb-market-result {
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  font-family: var(--gb-font-display);
  font-size: 13px;
  margin-bottom: 10px;
}

.pb-market-result.short {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--gb-short-color);
}

.pb-market-result.long {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: var(--gb-long-color);
}

.pb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.pb-block {
  aspect-ratio: 0.9;
  border-radius: 10px;
  border: 2px solid rgba(212, 175, 55, 0.25);
  background: linear-gradient(160deg, #1a1a2e 0%, #0d0d1a 50%, #141428 100%);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(212, 175, 55, 0.15),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4);
}
/* chest straps */
.pb-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.4),
    transparent
  );
  border-radius: 0 0 4px 4px;
}
.pb-block::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.3),
    transparent
  );
  border-radius: 4px 4px 0 0;
}

.pb-block:hover:not(:disabled) {
  border-color: rgba(212, 175, 55, 0.6);
  transform: scale(1.05);
  box-shadow:
    0 6px 25px rgba(212, 175, 55, 0.2),
    0 0 15px rgba(212, 175, 55, 0.1);
}

.pb-selected {
  border-color: #d4af37 !important;
  box-shadow:
    0 0 25px rgba(212, 175, 55, 0.4),
    0 0 50px rgba(212, 175, 55, 0.15),
    inset 0 0 15px rgba(212, 175, 55, 0.05);
  background: linear-gradient(160deg, #1f1a10 0%, #151020 50%, #1a1510 100%);
}

.pb-revealed {
  animation: pb-chest-open 0.5s ease;
}

.pb-short {
  border-color: rgba(239, 68, 68, 0.5);
  background: linear-gradient(160deg, #1a0a0a 0%, #0d0505 50%, #140808 100%);
  box-shadow:
    0 0 15px rgba(239, 68, 68, 0.15),
    inset 0 0 20px rgba(239, 68, 68, 0.05);
}
.pb-long {
  border-color: rgba(34, 197, 94, 0.5);
  background: linear-gradient(160deg, #0a1a10 0%, #050d08 50%, #081410 100%);
  box-shadow:
    0 0 15px rgba(34, 197, 94, 0.15),
    inset 0 0 20px rgba(34, 197, 94, 0.05);
}

.pb-winner {
  border-color: #d4af37 !important;
  box-shadow:
    0 0 30px rgba(212, 175, 55, 0.6),
    0 0 60px rgba(212, 175, 55, 0.2);
  animation: pb-treasure-glow 1s infinite;
}

.pb-loser {
  opacity: 0.4;
  filter: grayscale(0.5);
}

@keyframes pb-chest-open {
  0% {
    transform: scale(0.8) rotateX(20deg);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1) rotateX(0);
    opacity: 1;
  }
}

@keyframes pb-treasure-glow {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(212, 175, 55, 0.4),
      0 0 40px rgba(212, 175, 55, 0.1);
  }
  50% {
    box-shadow:
      0 0 35px rgba(212, 175, 55, 0.7),
      0 0 70px rgba(212, 175, 55, 0.25);
  }
}

.pb-block-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 1;
}

.pb-question {
  font-size: 32px;
  color: rgba(212, 175, 55, 0.5);
  font-family: var(--gb-font-display);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.pb-check {
  position: absolute;
  top: 4px;
  right: 6px;
  color: #d4af37;
  font-size: 14px;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.pb-side-label {
  font-family: var(--gb-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.pb-prize {
  font-family: var(--gb-font-display);
  font-size: 18px;
  font-weight: 900;
  color: #d4af37;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.pb-controls {
  text-align: center;
}

.pb-confirm-btn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gb-cyan), var(--gb-violet));
  border: none;
  color: #fff;
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
}

.pb-confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pb-result-panel {
  text-align: center;
}

.pb-result-text {
  font-family: var(--gb-font-display);
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 10px;
}

.pb-result-text.win {
  color: var(--gb-gold);
  text-shadow: 0 0 15px rgba(250, 204, 21, 0.4);
}
.pb-result-text.lose {
  color: var(--gb-short-color);
}

.pb-new-round-btn {
  padding: 10px 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--gb-cyan);
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.pb-history {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}

.ph-win {
  font-family: var(--gb-font-display);
  font-size: 10px;
  color: var(--gb-long-color);
  padding: 2px 6px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 4px;
}

.ph-lose {
  font-family: var(--gb-font-display);
  font-size: 10px;
  color: var(--gb-short-color);
  padding: 2px 6px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 4px;
}

/* Prize Block: Side Pick */
.pb-side-pick {
  text-align: center;
  padding: 20px 0;
}
.pb-side-title {
  font-family: var(--gb-font-display);
  font-size: 16px;
  font-weight: 900;
  color: #d4af37;
  letter-spacing: 3px;
  margin-bottom: 16px;
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}
.pb-side-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 12px;
}
.pb-player-side {
  text-align: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--gb-font-display);
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.pb-ps-short {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.pb-ps-long {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}
.pb-sl-short {
  color: #f87171;
}
.pb-sl-long {
  color: #4ade80;
}

/* =============================================
   TREASURE HUNT (보물상자)
   ============================================= */
.treasure-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.treasure-chest {
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: #000;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 8px;
}
.treasure-chest::before {
  display: none;
}
.treasure-chest:hover:not(:disabled) {
  border-color: rgba(139, 92, 246, 0.4);
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}
.treasure-chest:disabled {
  cursor: default;
}

.treasure-selected {
  border-color: var(--gb-gold) !important;
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.4) !important;
  background: linear-gradient(
    145deg,
    rgba(50, 40, 10, 0.9) 0%,
    rgba(30, 25, 5, 0.95) 100%
  );
}

.treasure-revealed {
  animation: treasure-open 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.treasure-winner {
  border-color: var(--gb-gold) !important;
  box-shadow: 0 0 30px rgba(250, 204, 21, 0.6) !important;
  animation: treasure-win-glow 1s ease-in-out infinite;
}
.treasure-loser {
  opacity: 0.4;
}

.treasure-shake {
  animation: treasure-shake-anim 0.4s ease;
}

.treasure-glow-pulse {
  animation: treasure-charge-glow 0.8s ease-in-out infinite;
}

.treasure-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 1;
}
.treasure-closed {
  gap: 0;
}

.treasure-emoji-closed {
  font-size: 36px;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.3));
}

/* 보물상자 이미지 */
.treasure-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  transition:
    transform 0.3s,
    filter 0.3s;
}
.treasure-img-selected {
  filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.6))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  animation: treasure-img-pulse 1.5s ease-in-out infinite;
}
@keyframes treasure-img-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
.treasure-info-overlay {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 2px 0 4px;
  border-radius: 0 0 12px 12px;
}

/* CSS 해적 보물상자 */
.treasure-box-icon {
  width: 64px;
  height: 56px;
  position: relative;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.treasure-box-lid {
  width: 100%;
  height: 22px;
  background: linear-gradient(180deg, #a16207 0%, #854d0e 40%, #713f12 100%);
  border: 2px solid #ca8a04;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  position: relative;
  overflow: hidden;
}
/* 뚜껑 나무결 */
.treasure-box-lid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 8px,
    rgba(0, 0, 0, 0.1) 8px,
    rgba(0, 0, 0, 0.1) 9px
  );
}
/* 뚜껑 금속 띠 */
.treasure-box-lid::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(180deg, #eab308, #ca8a04);
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.4);
}
.treasure-box-body {
  width: 100%;
  height: 34px;
  background: linear-gradient(
    180deg,
    #92400e 0%,
    #78350f 30%,
    #713f12 60%,
    #451a03 100%
  );
  border: 2px solid #ca8a04;
  border-top: none;
  border-radius: 0 0 6px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* 몸통 나무결 */
.treasure-box-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.08) 10px,
    rgba(0, 0, 0, 0.08) 11px
  );
}
/* 하단 금속 띠 */
.treasure-box-body::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 4px;
  right: 4px;
  height: 3px;
  background: linear-gradient(180deg, #ca8a04, #a16207);
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(202, 138, 4, 0.3);
}
.treasure-box-lock {
  font-size: 18px;
  z-index: 1;
  filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.8));
}

.treasure-box-selected {
  animation: treasure-box-glow 1.5s ease-in-out infinite;
}
.treasure-box-selected .treasure-box-lid {
  border-color: #fbbf24;
  background: linear-gradient(180deg, #b45309 0%, #92400e 40%, #78350f 100%);
}
.treasure-box-selected .treasure-box-body {
  border-color: #fbbf24;
}
@keyframes treasure-box-glow {
  0%,
  100% {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 8px rgba(250, 204, 21, 0.3));
  }
  50% {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 20px rgba(250, 204, 21, 0.7));
  }
}
.treasure-emoji {
  font-size: 28px;
}
.treasure-check {
  position: absolute;
  top: 4px;
  right: 6px;
  color: var(--gb-gold);
  font-size: 16px;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
}
.treasure-side {
  font-family: var(--gb-font-display);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}
.treasure-prize {
  font-family: var(--gb-font-display);
  font-size: 14px;
  font-weight: 900;
}
.treasure-rarity {
  font-family: var(--gb-font-display);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* 차지 바 */
.treasure-charge {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  margin-bottom: 12px;
  overflow: hidden;
}
.treasure-charge__bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #8b5cf6, #f59e0b, #ef4444);
  transition: width 0.1s linear;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
}
.treasure-charge__text {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 900;
  color: #f59e0b;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  white-space: nowrap;
  letter-spacing: 1px;
}

/* OPEN 버튼 */
.treasure-open-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 50%, #4c1d95 100%);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}
.treasure-open-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5);
}
.treasure-open-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.treasure-open-btn__text {
  font-family: var(--gb-font-display);
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 3px;
}
.treasure-open-btn__fee {
  font-family: var(--gb-font-display);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

/* 결과 */
.treasure-result-panel {
  text-align: center;
}
.treasure-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.treasure-result__emoji {
  font-size: 40px;
}
.treasure-result__text {
  font-family: var(--gb-font-display);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 3px;
}
.treasure-result.win .treasure-result__text {
  color: var(--gb-gold);
  text-shadow: 0 0 20px rgba(250, 204, 21, 0.5);
}
.treasure-result.lose .treasure-result__text {
  color: #ef4444;
  text-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}
.treasure-new-btn {
  padding: 12px 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--gb-cyan);
  font-family: var(--gb-font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s;
}
.treasure-new-btn:hover {
  border-color: var(--gb-cyan);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}

/* 애니메이션 */
@keyframes treasure-open {
  0% {
    transform: scale(0.8) rotate(-5deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotate(3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes treasure-shake-anim {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }
  15% {
    transform: translateX(-4px) rotate(-3deg);
  }
  30% {
    transform: translateX(4px) rotate(3deg);
  }
  45% {
    transform: translateX(-3px) rotate(-2deg);
  }
  60% {
    transform: translateX(3px) rotate(2deg);
  }
  75% {
    transform: translateX(-1px) rotate(-1deg);
  }
}
@keyframes treasure-win-glow {
  0%,
  100% {
    box-shadow: 0 0 15px rgba(250, 204, 21, 0.3);
  }
  50% {
    box-shadow: 0 0 35px rgba(250, 204, 21, 0.7);
  }
}
@keyframes treasure-charge-glow {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
  }
  50% {
    box-shadow:
      0 0 30px rgba(245, 158, 11, 0.5),
      0 0 60px rgba(139, 92, 246, 0.3);
  }
}

/* 풀스크린 결과 오버레이 */
.treasure-fullscreen-result {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  animation: result-fade 0.5s ease;
}
.treasure-result-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
}
.treasure-win .treasure-result-glow {
  background: radial-gradient(
    circle,
    rgba(250, 204, 21, 0.2) 0%,
    transparent 70%
  );
  animation: treasure-glow-breathe 2s ease-in-out infinite;
}
.treasure-lose .treasure-result-glow {
  background: radial-gradient(
    circle,
    rgba(239, 68, 68, 0.15) 0%,
    transparent 70%
  );
}
.treasure-result-icon {
  font-size: 72px;
  animation: result-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
}
.treasure-result-title {
  font-family: var(--gb-font-display);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 6px;
  animation: result-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.treasure-win .treasure-result-title {
  color: #fbbf24;
  text-shadow:
    0 0 30px rgba(250, 204, 21, 0.5),
    0 0 60px rgba(250, 204, 21, 0.2);
}
.treasure-lose .treasure-result-title {
  color: #ef4444;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}
.treasure-result-amount {
  font-family: var(--gb-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  animation: result-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.treasure-win .treasure-result-amount {
  color: #22c55e;
  text-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}
.treasure-lose .treasure-result-amount {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}
@keyframes treasure-glow-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

/* =============================================
   GoldenBall Crash
   ============================================= */
.crash-multiplier {
  text-align: center;
  padding: 16px;
  margin-bottom: 8px;
}

.crash-mult-value {
  font-family: var(--gb-font-display);
  font-size: 48px;
  font-weight: 900;
  color: var(--gb-long-color);
  text-shadow: 0 0 30px var(--gb-long-glow);
  transition: all 0.1s;
}

.crash-exploded .crash-mult-value {
  color: var(--gb-short-color);
  text-shadow: 0 0 40px var(--gb-short-glow);
  animation: crash-shake 0.5s ease;
}

.crash-cashed .crash-mult-value {
  color: var(--gb-gold);
  text-shadow: 0 0 30px rgba(250, 204, 21, 0.5);
}

.crash-label {
  font-family: var(--gb-font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--gb-short-color);
  letter-spacing: 3px;
  margin-top: 4px;
}

.cashed-label {
  font-family: var(--gb-font-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--gb-gold);
  letter-spacing: 2px;
  margin-top: 4px;
}

@keyframes crash-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}

/* GoldenBall Crash v3 — 화면 흔들림 */
.crash-screen-shake {
  animation: screen-shake 0.5s ease;
}
@keyframes screen-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-8px) translateY(4px);
  }
  30% {
    transform: translateX(8px) translateY(-4px);
  }
  50% {
    transform: translateX(-6px) translateY(2px);
  }
  70% {
    transform: translateX(6px) translateY(-2px);
  }
  90% {
    transform: translateX(-3px);
  }
}

/* 메인 디스플레이 영역 */
.crash-main-display {
  position: relative;
  min-height: 240px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  margin-bottom: 12px;
}

/* 카운트다운 */
.crash-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 240px;
}
.crash-cd-number {
  font-family: var(--gb-font-display);
  font-size: 80px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 60px rgba(250, 191, 36, 0.6);
  animation: cd-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cd-pop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
.crash-cd-text {
  font-family: var(--gb-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 8px;
}

/* 대기 화면 */
.crash-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 240px;
}
.crash-idle-rocket {
  font-size: 56px;
  animation: rocket-hover 2s ease-in-out infinite;
}
.crash-idle-title {
  font-family: var(--gb-font-display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #22c55e;
  text-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
  margin-top: 10px;
}
.crash-idle-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 6px;
}

/* Canvas 차트 영역 */
.crash-chart-area {
  position: relative;
  height: 240px;
}
.crash-canvas-v3 {
  width: 100%;
  height: 200px;
  display: block;
}
.crash-mult-overlay {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--gb-font-display);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 2px;
  pointer-events: none;
}

/* 풀스크린 BUSTED */
.crash-fullscreen-boom {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(60, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  animation: boom-in 0.4s ease;
  z-index: 10;
}
@keyframes boom-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.crash-boom-icon {
  font-size: 64px;
  animation: boom-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.crash-boom-title {
  font-family: var(--gb-font-display);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #ef4444;
  text-shadow: 0 0 40px rgba(239, 68, 68, 0.6);
}
.crash-boom-at {
  font-family: var(--gb-font-display);
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}
.crash-boom-loss {
  font-family: var(--gb-font-display);
  font-size: 18px;
  font-weight: 900;
  color: #ef4444;
  margin-top: 4px;
}

/* 풀스크린 CASHED OUT */
.crash-fullscreen-win {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 30, 0, 0.85);
  backdrop-filter: blur(6px);
  animation: boom-in 0.4s ease;
  z-index: 10;
}
.crash-win-icon {
  font-size: 56px;
  animation: boom-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.crash-win-title {
  font-family: var(--gb-font-display);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #22c55e;
  text-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
}
.crash-win-at {
  font-family: var(--gb-font-display);
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}
.crash-win-amount {
  font-family: var(--gb-font-display);
  font-size: 28px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
  margin-top: 4px;
}

/* Launch 버튼 */
.crash-launch-btn {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #22c55e 0%, #06b6d4 100%);
  border: none;
  color: #fff;
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.crash-launch-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(34, 197, 94, 0.5);
}
.crash-launch-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.crash-launch-icon {
  font-size: 20px;
}

/* Cashout v3 버튼 */
.crash-cashout-btn-v3 {
  width: 100%;
  padding: 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
  border: none;
  color: #fff;
  font-family: var(--gb-font-display);
  font-weight: 900;
  cursor: pointer;
  animation: cashout-glow-v3 0.6s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.crash-co-amount {
  font-size: 24px;
  letter-spacing: 1px;
}
.crash-co-label {
  font-size: 11px;
  letter-spacing: 3px;
  opacity: 0.8;
}
@keyframes cashout-glow-v3 {
  0%,
  100% {
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
    transform: scale(1.02);
  }
}

/* SHORT vs LONG 배틀 티커 */
.crash-battle-ticker {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.crash-bt-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.crash-bt-label {
  font-family: var(--gb-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
}
.crash-bt-short .crash-bt-label {
  color: var(--gb-short-color);
}
.crash-bt-long .crash-bt-label {
  color: var(--gb-long-color);
}
.crash-bt-price {
  font-family: var(--gb-font-display);
  font-size: 13px;
  font-weight: 900;
  color: #fff;
}
.crash-bt-vs {
  font-size: 16px;
  animation: bt-pulse 1s ease-in-out infinite;
}
@keyframes bt-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

.crash-display {
  text-align: center;
  padding: 24px 0 12px;
}
.crash-rocket-idle {
  font-size: 64px;
  animation: rocket-hover 2s ease-in-out infinite;
}
@keyframes rocket-hover {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.crash-ready-text {
  font-family: var(--gb-font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #22c55e;
  text-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
  margin-top: 8px;
}
.crash-ready-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 6px;
}
.crash-rocket-flying {
  font-size: 48px;
  animation: rocket-shake 0.3s ease-in-out infinite;
}
@keyframes rocket-shake {
  0%,
  100% {
    transform: translateX(0) rotate(-5deg);
  }
  50% {
    transform: translateX(2px) rotate(5deg);
  }
}
.crash-mult-display {
  font-family: var(--gb-font-display);
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 2px;
  transition: color 0.3s;
}
.crash-chart-bar {
  width: 80%;
  height: 6px;
  margin: 10px auto 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.crash-chart-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.1s linear;
}
.crash-bust-text {
  font-family: var(--gb-font-display);
  font-size: 20px;
  font-weight: 900;
  color: #ef4444;
  letter-spacing: 4px;
  animation: bust-shake 0.3s ease;
}
@keyframes bust-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}
.crash-cashout-text {
  font-family: var(--gb-font-display);
  font-size: 14px;
  color: #22c55e;
  letter-spacing: 1px;
}

/* GoldenBall Crash — 폭발 이펙트 */
.crash-explosion {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.crash-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: spark-fly 1.2s ease-out forwards;
}
@keyframes spark-fly {
  0% {
    transform: scale(2);
    opacity: 1;
  }
  100% {
    transform: scale(0) translateY(-60px);
    opacity: 0;
  }
}
.crash-boom-text {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 48px;
  animation: boom-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes boom-pop {
  0% {
    transform: translateX(-50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translateX(-50%) scale(1.3);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

/* GoldenBall Crash — 베팅 섹션 */
.crash-betting {
  padding: 0 4px;
}
.crash-section-title {
  font-family: var(--gb-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 6px;
}
.crash-target-row {
  display: flex;
  gap: 6px;
}
.crash-result-section {
  text-align: center;
  padding: 12px;
}
.crash-result-banner {
  font-family: var(--gb-font-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 14px;
  border-radius: 10px;
}
.cr-win {
  color: #fbbf24;
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.2);
}
.cr-lose {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.crash-chart-wrap {
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--gb-bg-card);
}

.crash-canvas {
  width: 100%;
  height: 200px;
  display: block;
}

.crash-controls {
  text-align: center;
}

.crash-start-btn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gb-cyan), var(--gb-violet));
  border: none;
  color: #fff;
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 0 15px var(--gb-cyan-glow);
  transition: all 0.2s;
}

.crash-start-btn:hover {
  transform: scale(1.02);
}

.crash-cashout-btn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gb-long-color), #06b6d4);
  border: none;
  color: #fff;
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: pointer;
  animation: cashout-pulse 0.8s infinite;
}

@keyframes cashout-pulse {
  0%,
  100% {
    box-shadow: 0 0 15px var(--gb-long-glow);
  }
  50% {
    box-shadow: 0 0 30px var(--gb-long-glow);
    transform: scale(1.02);
  }
}

.crash-rocket-emoji {
  font-size: 40px;
  display: block;
  margin-bottom: 4px;
}
.crash-mult-warm {
  color: #f59e0b !important;
  text-shadow: 0 0 30px rgba(245, 158, 11, 0.5) !important;
}
.crash-mult-hot {
  color: #ef4444 !important;
  text-shadow: 0 0 40px rgba(239, 68, 68, 0.6) !important;
  animation: crash-hot-pulse 0.5s ease-in-out infinite;
}
@keyframes crash-hot-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.crash-desc {
  text-align: center;
  font-family: var(--gb-font-display);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.crash-fullscreen-result {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  backdrop-filter: blur(8px);
  animation: result-fade 0.3s ease;
  pointer-events: none;
}
.crash-win-overlay {
  background: rgba(0, 0, 0, 0.8);
}
.crash-lose-overlay {
  background: rgba(40, 0, 0, 0.8);
}
.crash-result-icon {
  font-size: 64px;
  animation: result-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.crash-result-title {
  font-family: var(--gb-font-display);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 4px;
}
.crash-win-overlay .crash-result-title {
  color: #fbbf24;
  text-shadow: 0 0 30px rgba(250, 204, 21, 0.5);
}
.crash-lose-overlay .crash-result-title {
  color: #ef4444;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}
.crash-result-detail {
  font-family: var(--gb-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}
.crash-win-overlay .crash-result-detail {
  color: #22c55e;
}
.crash-lose-overlay .crash-result-detail {
  color: rgba(255, 255, 255, 0.5);
}

.crash-history {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.crash-h-item {
  font-family: var(--gb-font-display);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
}

.ch-win {
  color: var(--gb-long-color);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.ch-lose {
  color: var(--gb-short-color);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* =============================================
   GoldenBall Wheel
   ============================================= */
.wheel-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 12px;
  max-width: 280px;
}
.wheel-pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 24px;
  color: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.6));
  line-height: 1;
}
.wheel-spinner {
  width: 100%;
  will-change: transform;
}
.wheel-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.3));
}
.wheel-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wheel-spin-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 50%, #4c1d95 100%);
  border: none;
  color: #fff;
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
  transition: all 0.2s;
}
.wheel-spin-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.6);
}
.wheel-spinning-text {
  text-align: center;
  font-family: var(--gb-font-display);
  font-size: 14px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 2px;
  padding: 14px;
  animation: wheel-pulse-text 1s ease-in-out infinite;
}
@keyframes wheel-pulse-text {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.wheel-result-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  backdrop-filter: blur(8px);
  animation: result-fade 0.4s ease;
}
.wheel-win {
  background: rgba(0, 0, 0, 0.85);
}
.wheel-lose {
  background: rgba(30, 0, 0, 0.85);
}
.wheel-result-icon {
  font-size: 60px;
  animation: result-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wheel-result-seg {
  font-family: var(--gb-font-display);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 2px;
}
.wheel-result-title {
  font-family: var(--gb-font-display);
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 5px;
}
.wheel-win .wheel-result-title {
  color: #fbbf24;
  text-shadow: 0 0 30px rgba(250, 204, 21, 0.5);
}
.wheel-lose .wheel-result-title {
  color: #ef4444;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}
.wheel-result-amount {
  font-family: var(--gb-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
}
.wheel-win .wheel-result-amount {
  color: #22c55e;
  text-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}
.wheel-lose .wheel-result-amount {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
}
.wheel-new-btn {
  margin-top: 8px;
  padding: 12px 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--gb-cyan);
  font-family: var(--gb-font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
}

.plinko-result {
  text-align: center;
  padding: 8px;
  margin-bottom: 8px;
  border-radius: 8px;
  font-family: var(--gb-font-display);
  font-size: 16px;
  font-weight: 900;
}

.pr-win {
  color: var(--gb-gold);
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.2);
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.4);
}

.pr-normal {
  color: var(--gb-text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.plinko-board {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--gb-bg-card);
  margin-bottom: 12px;
}

.plinko-canvas {
  width: 100%;
  height: auto;
  display: block;
}

.plinko-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.risk-selector {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.risk-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gb-text-secondary);
  font-family: var(--gb-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}

.risk-active {
  background: rgba(139, 92, 246, 0.15);
  border-color: var(--gb-violet);
  color: var(--gb-violet);
  box-shadow: 0 0 10px var(--gb-violet-glow);
}

.plinko-side-row {
  display: flex;
  gap: 8px;
}

.plinko-side-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gb-text-secondary);
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.plinko-side-btn.short.selected {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--gb-short-color);
  color: var(--gb-short-color);
  box-shadow: 0 0 12px var(--gb-short-glow);
}

.plinko-side-btn.long.selected {
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--gb-long-color);
  color: var(--gb-long-color);
  box-shadow: 0 0 12px var(--gb-long-glow);
}

/* TREASURE 약간 큰 버튼 */
.pb-side-lg {
  padding: 14px;
  font-size: 14px;
  letter-spacing: 2px;
}
.pb-side-active.short {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--gb-short-color);
  color: var(--gb-short-color);
  box-shadow: 0 0 12px var(--gb-short-glow);
}
.pb-side-active.long {
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--gb-long-color);
  color: var(--gb-long-color);
  box-shadow: 0 0 12px var(--gb-long-glow);
}

.plinko-drop-btn {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #a855f7, var(--gb-violet));
  border: none;
  color: #fff;
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 0 15px var(--gb-violet-glow);
  transition: all 0.2s;
}

.plinko-drop-btn:hover {
  transform: scale(1.02);
}

.plinko-history {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}

.plinko-h-item {
  font-family: var(--gb-font-display);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
}

.plh-win {
  color: var(--gb-gold);
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.2);
}

.plh-normal {
  color: var(--gb-text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* =============================================
   HOME PAGE — 프리미엄 상업 디자인
   ============================================= */
.home-page {
  padding: 0 16px 80px;
  min-height: 100%;
}

/* --- GoldenBall Index 히어로 --- */
.gb-index-hero {
  text-align: center;
  padding: 24px 16px 20px;
  background: rgba(10, 10, 25, 0.85);
  backdrop-filter: blur(16px);
  border: 2px solid rgba(6, 182, 212, 0.9);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 12px rgba(6, 182, 212, 0.4),
    0 0 30px rgba(6, 182, 212, 0.15),
    inset 0 1px 0 rgba(6, 182, 212, 0.2),
    inset 0 -1px 0 rgba(6, 182, 212, 0.1);
  animation: neon-cyan 3s ease-in-out infinite;
}

/* ★ 히어로 상단 레이저 라인 */
.gb-index-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #06b6d4,
    #10b981,
    transparent
  );
  z-index: 2;
}
.gb-index-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(6, 182, 212, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.gb-index-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--gb-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gb-cyan);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.gb-index-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gb-emerald);
  box-shadow: 0 0 8px var(--gb-emerald);
  animation: pulse-dot 2s infinite;
}

.gb-index-live {
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(16, 185, 129, 0.2);
  color: var(--gb-emerald);
  font-size: 8px;
  letter-spacing: 1px;
  animation: pulse-dot 2s infinite;
}

.gb-index-price {
  font-family: var(--gb-font-display);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  transition: color 0.3s ease;
  line-height: 1.1;
}

.gb-index-price.price-up {
  text-shadow: 0 0 40px rgba(34, 197, 94, 0.4);
}

.gb-index-price.price-down {
  text-shadow: 0 0 40px rgba(239, 68, 68, 0.4);
}

.gb-index-change {
  font-family: var(--gb-font-display);
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* --- 3거래소 실시간 가격 --- */
.exchange-prices {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.exchange-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 100px;
}

.exchange-name {
  font-family: var(--gb-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}

.exchange-weight {
  font-family: var(--gb-font-display);
  font-size: 8px;
  color: var(--gb-text-muted);
  letter-spacing: 0.5px;
}

.exchange-price {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--gb-text-primary);
  letter-spacing: 0.3px;
}

/* --- 미니차트 --- */
.gb-chart-section {
  margin-top: 20px;
  background: rgba(10, 10, 25, 0.85);
  backdrop-filter: blur(16px);
  border: 2px solid rgba(139, 92, 246, 0.9);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 12px rgba(139, 92, 246, 0.4),
    0 0 30px rgba(139, 92, 246, 0.15),
    inset 0 1px 0 rgba(139, 92, 246, 0.2),
    inset 0 -1px 0 rgba(139, 92, 246, 0.1);
  animation: neon-purple 3s ease-in-out infinite 0.5s;
}

.chart-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.chart-title {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
}

.chart-stats {
  display: flex;
  gap: 10px;
}

.chart-stat {
  font-family: var(--gb-font-display);
  font-size: 9px;
  color: var(--gb-text-muted);
  letter-spacing: 0.3px;
}

.chart-stat strong {
  color: var(--gb-text-secondary);
}

/* ★ 홈 차트 토글 */
.home-chart-toggle {
  display: flex;
  gap: 4px;
  padding: 4px 14px;
}
.home-chart-toggle button {
  padding: 3px 10px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.home-chart-toggle button.active {
  background: rgba(139, 92, 246, 0.3);
  color: #fff;
  border-color: rgba(139, 92, 246, 0.7);
}
/* ★ 레이저 디스플레이 (FLOWW yield-control 참고) */
.home-laser-display {
  width: 100%;
  height: 280px;
  position: relative;
  background: rgba(0, 10, 20, 0.9);
  overflow: hidden;
}
.home-laser-display::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #8b5cf6,
    #06b6d4,
    transparent
  );
  animation: laser-scan 2s linear infinite;
}
.home-laser-display::after {
  content: "";
  position: absolute;
  top: 30%;
  right: -100%;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #06b6d4,
    #10b981,
    transparent
  );
  animation: laser-scan-rev 3s linear infinite;
}
@keyframes laser-scan {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes laser-scan-rev {
  0% {
    right: -100%;
  }
  100% {
    right: 100%;
  }
}

.home-chart-canvas {
  width: 100%;
  height: 280px;
  display: block;
}

/* --- 퀵 액션 버튼 (프리미엄 카드) --- */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.quick-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
  position: relative;
  overflow: visible;
}

.qa-card-img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

/* 카드 하단 텍스트 이미지 */
.qa-card-text-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 80%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

/* 호버: 스케일업 + 보라 광원 */
.quick-action-btn:hover {
  transform: scale(1.08);
}
.quick-action-btn:hover .qa-card-img {
  transform: scale(1.25);
  filter: brightness(1.2) drop-shadow(0 0 20px rgba(139, 92, 246, 0.6));
}
.quick-action-btn:hover .qa-card-text-img {
  transform: translateX(-50%) scale(1.1);
  filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.6))
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}

/* 터치 (액티브) */
.quick-action-btn:active {
  transform: scale(0.96);
}
.quick-action-btn:active .qa-card-img {
  filter: brightness(1.4) drop-shadow(0 0 30px rgba(139, 92, 246, 0.8));
}

/* ==============================================
   HOMEPAGE PREMIUM CARD SKIN (v2)
   ============================================== */

/* 게임 카드 그리드 — 아레나 스타일 */
.hp-game-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.hp-game-card {
  display: block;
  padding: 0;
  border-radius: 16px;
  border: 1.5px solid;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  animation: card-enter 0.4s ease-out both;
}
.hp-game-card:nth-child(1) {
  animation-delay: 0s;
}
.hp-game-card:nth-child(2) {
  animation-delay: 0.08s;
}
.hp-game-card:active {
  transform: scale(0.97);
}
.hp-game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.hp-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-block;
  font-family: var(--gb-font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
}
.hp-card-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.hp-game-card:hover .hp-card-img {
  transform: scale(1.03);
}

.hp-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  border-radius: 0 0 16px 16px;
}
.hp-card-play {
  font-family: var(--gb-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid;
  transition: all 0.3s;
}
.hp-game-card:hover .hp-card-play {
  transform: translateX(3px);
}

/* 통계 카드 */
.hp-stats-card {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 20px;
  padding: 14px 8px;
  background: rgba(10, 10, 25, 0.85);
  backdrop-filter: blur(16px);
  border: 2px solid rgba(245, 158, 11, 0.6);
  border-radius: 20px;
  position: relative;
  box-shadow:
    0 0 8px rgba(245, 158, 11, 0.25),
    0 0 20px rgba(245, 158, 11, 0.1),
    inset 0 1px 0 rgba(245, 158, 11, 0.15),
    inset 0 -1px 0 rgba(245, 158, 11, 0.08);
  animation: neon-amber 3s ease-in-out infinite 1s;
}
.hp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.hp-stat-value {
  font-family: var(--gb-font-display);
  font-size: 15px;
  font-weight: 900;
  color: var(--gb-text-primary);
}
.hp-stat-label {
  font-family: var(--gb-font-display);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--gb-text-muted);
}
.hp-stat-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.08);
}

/* 최근 배틀 카드 */
.hp-recent-card {
  margin-top: 20px;
  padding: 16px;
  background: rgba(10, 10, 25, 0.85);
  backdrop-filter: blur(16px);
  border: 2px solid rgba(16, 185, 129, 0.6);
  border-radius: 20px;
  margin-bottom: 80px;
  position: relative;
  box-shadow:
    0 0 8px rgba(16, 185, 129, 0.25),
    0 0 20px rgba(16, 185, 129, 0.1),
    inset 0 1px 0 rgba(16, 185, 129, 0.15),
    inset 0 -1px 0 rgba(16, 185, 129, 0.08);
  animation: neon-emerald 3s ease-in-out infinite 1.5s;
}
.hp-recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.hp-recent-title {
  font-family: var(--gb-font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--gb-text-primary);
}
.hp-recent-badge {
  font-family: var(--gb-font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #22c55e;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  animation: pulse 2s infinite;
}
.hp-battle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  transition: all 0.2s;
}
.hp-battle-row:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
.hp-battle-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hp-battle-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.hp-battle-badge {
  font-family: var(--gb-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 6px;
}
.hp-win {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.hp-lose {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.hp-battle-side {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--gb-text-secondary);
  letter-spacing: 0.5px;
}
.hp-battle-amount {
  font-family: var(--gb-font-display);
  font-size: 13px;
  font-weight: 700;
}
.hp-battle-time {
  font-size: 9px;
  color: var(--gb-text-muted);
}

/* --- 라이브 통계 바 --- */
.live-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 14px;
  padding: 12px 8px;
  background: var(--gb-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.live-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ls-value {
  font-family: var(--gb-font-display);
  font-size: 14px;
  font-weight: 900;
  color: #fff;
}

.ls-label {
  font-family: var(--gb-font-display);
  font-size: 7px;
  color: var(--gb-text-muted);
  letter-spacing: 1px;
}

.live-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.08);
}

/* --- 최근 활동 --- */
.recent-section {
  margin-top: 16px;
}

.activity-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 6px;
  background: var(--gb-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: all 0.2s;
}

.activity-card:hover {
  border-color: rgba(6, 182, 212, 0.15);
  background: rgba(10, 10, 20, 0.95);
}

.ac-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ac-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--gb-font-display);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}

.ac-win {
  background: rgba(34, 197, 94, 0.15);
  color: var(--gb-long-color);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.ac-lose {
  background: rgba(239, 68, 68, 0.15);
  color: var(--gb-short-color);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.ac-side {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--gb-text-secondary);
  letter-spacing: 1px;
}

.ac-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.ac-amount {
  font-family: var(--gb-font-display);
  font-size: 13px;
  font-weight: 900;
}

.ac-time {
  font-size: 9px;
  color: var(--gb-text-muted);
  font-family: var(--gb-font-display);
  letter-spacing: 0.5px;
}

/* ── 자동 스왑 모달 ── */
.swap-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.swap-modal {
  background: #141924; border: 1px solid rgba(249,115,22,0.35);
  border-radius: 20px; padding: 32px 28px; width: 88%; max-width: 340px;
  text-align: center; box-shadow: 0 8px 40px rgba(249,115,22,0.18);
}
.swap-modal-icon { font-size: 36px; margin-bottom: 12px; }
.swap-modal-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.swap-modal-desc { font-size: 14px; color: #aab; line-height: 1.6; margin-bottom: 24px; }
.swap-modal-desc strong { color: #f97316; }
.swap-modal-buttons { display: flex; gap: 10px; }
.swap-modal-btn { flex: 1; padding: 12px 0; border-radius: 10px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: opacity 0.15s; }
.swap-modal-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.swap-modal-btn.confirm { background: linear-gradient(135deg,#f97316,#ea580c); color: #fff; }
.swap-modal-btn.confirm:hover:not(:disabled) { opacity: 0.88; }
.swap-modal-btn.cancel { background: rgba(255,255,255,0.07); color: #aab; }
.swap-modal-btn.cancel:hover:not(:disabled) { background: rgba(255,255,255,0.12); }

/* =============================================
   BATTLE PAGE v7 — Quotex-Level Premium
   ============================================= */
.bp {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 20% 0%,
      rgba(88, 28, 135, 0.25) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 80% 100%,
      rgba(6, 182, 212, 0.15) 0%,
      transparent 55%
    ),
    radial-gradient(ellipse at 50% 40%, rgba(15, 10, 30, 1) 0%, #04040c 100%);
}

/* ─── 히어로 차트 ─── */
.bp-hero {
  position: relative;
  flex: 1;
  /* ★ 2026-06-18: min-height:0 → 32dvh. iOS Safari 에서 .bp{height:100%} 체인이 끊겨
     flex:1 hero 가 0 으로 붕괴 → 차트 캔버스 높이 0 → 그래프 안 보이던 버그 수정.
     이 floor 로 아이폰에서도 차트 영역이 항상 보장된다. */
  min-height: 32dvh;
  max-height: 55dvh;
  background: linear-gradient(
    180deg,
    rgba(8, 6, 20, 0.4) 0%,
    rgba(4, 4, 12, 0.95) 100%
  );
  overflow: hidden;
  border-bottom: 1.5px solid rgba(6, 182, 212, 0.4);
  box-shadow:
    inset 0 -50px 80px -20px rgba(4, 4, 12, 0.98),
    0 0 8px rgba(6, 182, 212, 0.2);
  animation: neon-cyan 3s ease-in-out infinite;
}
/* ★ 사이언 투명 격자 패턴 */
.bp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 1;
}
.bp-hero__canvas {
  position: absolute;
  /* ★ 2026-06-18: inset:0 로 hero 를 채우되, 실제 픽셀 크기는 JS(draw)가 부모(.bp-hero) 의
     getBoundingClientRect 로 명시 설정한다. CSS height:100% 는 iOS Safari 에서 0 으로 해소되어
     캔버스가 안 그려지므로 의도적으로 사용하지 않는다. */
  inset: 0;
  display: block;
  opacity: 1;
  z-index: 1;
}
.bp-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;          /* 가격 텍스트 = 그라데이션 띠(2)·차트(1) 위 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 16px 12px;
  pointer-events: none;
}
.bp-hero__overlay > * {
  pointer-events: auto;
}
.bp-chart-toggle {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.bp-chart-toggle__btn {
  background: rgba(20, 15, 35, 0.7);
  border: 1px solid rgba(139, 92, 246, 0.2);
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  font-family: "Orbitron", monospace;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.bp-chart-toggle__btn.active {
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.6);
  color: #fff;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}
.bp-chart-toggle__btn:hover {
  border-color: rgba(139, 92, 246, 0.4);
  color: rgba(255, 255, 255, 0.8);
}
.bp-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.bp-hero__price-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bp-hero__pair {
  font-family: var(--gb-font-display);
  font-size: 12px;
  color: rgba(139, 92, 246, 0.85);
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(139, 92, 246, 0.4);
}
/* [2026-07-12 영업 #2-4] 노란 바이낸스 링크 옆 큰 회차칩 (기존 우측상단 작은 pill 대체) */
.bp-hero__round-big {
  font-size: 15px;
  font-weight: 800;
  font-family: 'Orbitron', monospace;
  color: #fbbf24;
  background: rgba(240,185,11,0.12);
  border: 1px solid rgba(240,185,11,0.4);
  border-radius: 6px;
  padding: 2px 9px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bp-hero__val {
  font-family: var(--gb-font-display);
  font-size: 20px;
  font-weight: 800;
  color: #f0f0ff;
  letter-spacing: -0.5px;
  text-shadow:
    0 0 24px rgba(139, 92, 246, 0.4),
    0 0 80px rgba(6, 182, 212, 0.2),
    0 2px 20px rgba(0, 0, 0, 0.9);
  animation: price-glow 3s ease-in-out infinite alternate;
  transition: color 0.25s ease;
}
/* [2026-07-06] 홈 GoldenBall Index 지표와 동일한 룩 — 틱 방향 따라 초록/빨강 + 컬러 글로우 (흰색 단색 X) */
.bp-hero__val.up {
  color: var(--gb-long-color);
  text-shadow:
    0 0 24px rgba(34, 197, 94, 0.45),
    0 0 70px rgba(34, 197, 94, 0.18),
    0 2px 20px rgba(0, 0, 0, 0.9);
  animation: none;
}
.bp-hero__val.down {
  color: var(--gb-short-color);
  text-shadow:
    0 0 24px rgba(239, 68, 68, 0.45),
    0 0 70px rgba(239, 68, 68, 0.18),
    0 2px 20px rgba(0, 0, 0, 0.9);
  animation: none;
}
@keyframes price-glow {
  0% {
    text-shadow:
      0 0 20px rgba(139, 92, 246, 0.3),
      0 0 60px rgba(6, 182, 212, 0.15),
      0 2px 20px rgba(0, 0, 0, 0.8);
  }
  100% {
    text-shadow:
      0 0 30px rgba(139, 92, 246, 0.5),
      0 0 80px rgba(6, 182, 212, 0.25),
      0 2px 20px rgba(0, 0, 0, 0.8);
  }
}
.bp-hero__right {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.bp-hero__chg {
  font-family: var(--gb-font-display);
  font-size: 15px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  backdrop-filter: blur(12px);
  border: 1px solid transparent;
}
.bp-hero__chg.up {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.25);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.15);
}
.bp-hero__chg.down {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.25);
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.15);
}
.bp-hero__live {
  font-size: 10px;
  color: #4ade80;
  letter-spacing: 3px;
  font-weight: 800;
  text-shadow:
    0 0 12px rgba(74, 222, 128, 0.8),
    0 0 30px rgba(74, 222, 128, 0.4);
  animation: blink 1.2s infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* --- 배틀 인포 (타이머 + PnL) --- */
.bp-hero__battle-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(10, 10, 20, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 16px;
  align-self: flex-start;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.bp-hero__timer {
  position: relative;
  width: 52px;
  height: 52px;
}
.bp-hero__timer-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 12px var(--tc, rgba(74, 222, 128, 0.6)));
}
.bp-hero__timer-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 3;
}
.bp-hero__timer-ring {
  fill: none;
  stroke: var(--tc, #4ade80);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s linear;
}
.bp-hero__timer-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gb-font-display);
  font-size: 13px;
  font-weight: 900;
  color: var(--tc, #4ade80);
  text-shadow: 0 0 10px currentColor;
}
.bp-hero__pnl {
  font-family: var(--gb-font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.bp-hero__pnl.up {
  color: #4ade80;
  text-shadow: 0 0 16px rgba(74, 222, 128, 0.5);
}
.bp-hero__pnl.down {
  color: #f87171;
  text-shadow: 0 0 16px rgba(248, 113, 113, 0.5);
}

/* --- 파워 게이지 + 캐릭터 배틀 --- */
.bp-power {
  padding: 0 8px;
  display: flex;
  align-items: center;
  position: relative;
  height: 40px;
  max-height: 40px;
  overflow: visible;
}
.bp-char {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6));
  z-index: 2;
}
.bp-char--s {
  margin-right: -6px;
}
.bp-char--l {
  margin-left: -6px;
  transform: scaleX(-1);
}
.bp-char.fighting.bp-char--s {
  animation: char-fight-s 0.4s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.6));
}
.bp-char.fighting.bp-char--l {
  animation: char-fight-l 0.4s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.6));
}
@keyframes char-fight-s {
  0% {
    transform: translateX(0) scale(1) rotate(0);
  }
  25% {
    transform: translateX(10px) scale(1.1) rotate(3deg);
  }
  50% {
    transform: translateX(-5px) scale(0.95) rotate(-2deg);
  }
  75% {
    transform: translateX(14px) scale(1.15) rotate(4deg);
  }
  100% {
    transform: translateX(0) scale(1) rotate(0);
  }
}
@keyframes char-fight-l {
  0% {
    transform: scaleX(-1) translateX(0) scale(1) rotate(0);
  }
  25% {
    transform: scaleX(-1) translateX(10px) scale(1.1) rotate(-3deg);
  }
  50% {
    transform: scaleX(-1) translateX(-5px) scale(0.95) rotate(2deg);
  }
  75% {
    transform: scaleX(-1) translateX(14px) scale(1.15) rotate(-4deg);
  }
  100% {
    transform: scaleX(-1) translateX(0) scale(1) rotate(0);
  }
}

/* 경계 전투 캐릭터 */
.bp-power__fighters {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  z-index: 10;
  pointer-events: none;
  transition: left 0.15s linear;
  overflow: visible;
}
.bp-fighter {
  width: 70px;
  height: 70px;
  object-fit: contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.8));
}
.bp-fighter--s {
  right: 2px;
}
.bp-fighter--l {
  left: 2px;
  transform: translateY(-50%) scaleX(-1);
}
/* 2프레임 번갈아 보여주기 — 칼질 효과 */
.bp-fighter--frame-a {
  animation: fighter-swap 300ms step-end infinite;
}
.bp-fighter--frame-b {
  animation: fighter-swap 300ms step-end infinite reverse;
}
@keyframes fighter-swap {
  0%,
  49.9% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* 배틀 중 파워바 충돌 스파크 */
.bp-power::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #facc15 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.bp-power.battling::after {
  animation: clash-spark 0.4s ease-out infinite;
}
@keyframes clash-spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3);
  }
}
/* 배틀 중 전체 스크린 미세 진동 */
.bp.battling {
  animation: screen-shake 0.15s infinite;
}
@keyframes screen-shake {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(1px, -1px);
  }
  50% {
    transform: translate(-1px, 1px);
  }
  75% {
    transform: translate(1px, 0px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.bp-power__bar {
  flex: 1;
  display: flex;
  height: 32px;
  border-radius: 10px;
  overflow: visible;
  background: rgba(255, 255, 255, 0.03);
  position: relative;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.bp-power__fill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: width 0.15s linear;
  position: relative;
}
.bp-power__fill--s {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 50%, #991b1b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(239, 68, 68, 0.3);
}
.bp-power__fill--l {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(34, 197, 94, 0.3);
}
.bp-power__label {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1.5px;
  white-space: nowrap;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.6),
    0 0 8px currentColor;
}

/* --- 배틀 영상 오버레이 --- */
.bp-video-overlay {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
  border-top: 1px solid rgba(139, 92, 246, 0.3);
  border-bottom: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow:
    0 0 30px rgba(139, 92, 246, 0.15),
    inset 0 0 60px rgba(0, 0, 0, 0.8);
  animation: video-enter 0.4s ease-out;
}
@keyframes video-enter {
  0% {
    opacity: 0;
    transform: scaleY(0.8);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.bp-video-player {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
}
/* [2026-07-10 #7] 배틀 영상 컴팩트 고정창 — 전체화면 점유 대신 그래프 밑 작은 창 */
.bp-video-overlay--compact .bp-video-player { max-height: 150px; }

/* [2026-07-10 #2-4] 상단 상시 회차칩 */
.bp-hero__round {
  font-size: 12px;
  font-weight: 800;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 6px;
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
/* [2026-07-10 #11] 최근 결과 UP/DOWN 리스트 (그래프 밑, 가운데정렬) */
.bp-recent-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
}
.bp-recent-empty { color: #475569; font-size: 11px; }
/* [2026-07-12 영업 #2-3] 배틀 개인 베팅 히스토리 목록 (파워볼식) */
.bp-myhist { margin: 8px 10px 0; }
.bp-myhist-head { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: rgba(196,181,253,0.7); padding: 0 2px 4px; }
.bp-myhist-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.bp-myhist-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: 8px; font-size: 12px; background: rgba(255,255,255,0.03); }
.bp-myhist-row.win { background: rgba(16,185,129,0.08); }
.bp-myhist-row.lose { background: rgba(239,68,68,0.06); }
.bp-myhist-dir { font-weight: 700; font-family: 'Orbitron', monospace; }
.bp-myhist-dir.up { color: #00d4aa; }
.bp-myhist-dir.down { color: #ef4444; }
.bp-myhist-amt { color: #cbd5e1; font-variant-numeric: tabular-nums; }
.bp-myhist-win { color: #34d399; font-weight: 700; }
.bp-myhist-lose { color: #f87171; font-weight: 700; }
.bp-recent-pill {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}
.bp-recent-pill--up { background: linear-gradient(135deg, #34d399, #00d4aa); }
.bp-recent-pill--down { background: linear-gradient(135deg, #f87171, #ef4444); }
.bp-recent-pill--new { animation: pb-ball-slidein 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* [2026-07-10] 자체 이메일 로그인/가입 패널 (WalletGate 카드 내부) */
.email-auth { display: flex; flex-direction: column; gap: 9px; }
.email-auth__in {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px;
  padding: 11px 13px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: #f1f5f9;
  outline: none; transition: border-color 0.15s;
}
.email-auth__in::placeholder { color: #64748b; }
.email-auth__in:focus { border-color: #a855f7; }
.email-auth__in--code { text-align: center; letter-spacing: 6px; font-size: 18px; font-weight: 700; }
.email-auth__btn {
  width: 100%; font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 12px; border-radius: 10px; cursor: pointer; border: none; margin-top: 2px;
  background: linear-gradient(135deg,#a855f7,#7c3aed); color: #fff; transition: opacity 0.15s;
}
.email-auth__btn:disabled { opacity: 0.6; cursor: default; }
.email-auth__links { display: flex; justify-content: space-between; gap: 10px; margin-top: 2px; }
.email-auth__link { background: none; border: none; color: #a78bfa; font-family: inherit; font-size: 12.5px; cursor: pointer; padding: 4px 2px; }
.email-auth__link:hover { color: #c4b5fd; text-decoration: underline; }
.email-auth__err { color: #fca5a5; font-size: 12.5px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); border-radius: 8px; padding: 8px 10px; line-height: 1.4; }
.email-auth__msg { color: #86efac; font-size: 12.5px; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); border-radius: 8px; padding: 8px 10px; line-height: 1.4; }
.email-auth__hint { color: rgba(255,255,255,0.4); font-size: 11.5px; line-height: 1.45; margin: 2px 2px 0; }
/* [2026-07-15] 아이디 가입 — 중복확인 버튼 행 + 인라인 상태 메시지 */
.email-auth__row { display: flex; gap: 8px; align-items: stretch; }
.email-auth__row .email-auth__in { flex: 1; min-width: 0; }
.email-auth__check-btn {
  flex-shrink: 0; font-family: inherit; font-size: 12.5px; font-weight: 700;
  padding: 0 14px; border-radius: 10px; cursor: pointer;
  background: rgba(168,85,247,0.16); border: 1px solid rgba(168,85,247,0.4); color: #d8b4fe;
  transition: opacity 0.15s, border-color 0.15s;
}
.email-auth__check-btn:disabled { opacity: 0.5; cursor: default; }
.email-auth__field-msg { font-size: 11.5px; margin: -3px 2px 0; line-height: 1.4; }
.email-auth__field-msg--ok { color: #86efac; }
.email-auth__field-msg--bad { color: #fca5a5; }
.bp-video-hud {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 5;
  pointer-events: none;
}
.bp-video-hud .bp-hero__timer {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
}
.bp-video-hud .bp-hero__pnl {
  font-size: 18px;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
}
.bp-video-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    transparent 30%,
    transparent 60%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* --- 슬롯 (프리미엄) --- */
.bp-slot {
  padding: 6px 12px;
  background: rgba(12, 10, 22, 0.85);
  backdrop-filter: blur(16px);
  border-top: 1.5px solid rgba(139, 92, 246, 0.4);
  border-bottom: 1.5px solid rgba(139, 92, 246, 0.3);
  transition: all 0.3s;
  animation: neon-purple 3s ease-in-out infinite 0.5s;
  position: relative;
}
/* ★ 레이저 보더 — 퍼플→사이언 그라디언트 */
.bp-slot::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139, 92, 246, 0.8),
    rgba(6, 182, 212, 0.8),
    transparent
  );
  z-index: 2;
}
.bp-slot--spin {
  background: rgba(6, 182, 212, 0.06);
  border-top-color: rgba(6, 182, 212, 0.2);
}
.bp-slot__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.bp-slot__reels {
  display: flex;
  gap: 4px;
  position: relative;
}
/* [2026-07-09 한 화면 정리] 베팅(idle) 중엔 슬롯 릴 캐릭터를 배경화(흐리게)하고 높이 축소 —
   카운트다운·진입가가 focal, 차트에 숨통. 잠금 애니메이션(.bp-slot--spin)은 원래대로 유지. */
.bp-slot:not(.bp-slot--spin) .bp-slot__reel {
  height: clamp(100px, 27vw, 132px);
}
.bp-slot:not(.bp-slot--spin) .bp-slot__sym {
  opacity: 0.30;
  filter: saturate(0.7);
  transition: opacity 0.3s;
}
.bp-slot__reel {
  width: clamp(100px, 30vw, 200px);
  height: clamp(110px, 35vw, 230px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(15, 10, 30, 0.95),
    rgba(5, 3, 15, 0.98)
  );
  border: 2px solid rgba(139, 92, 246, 0.4);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(139, 92, 246, 0.15);
}
.bp-slot__reel.spinning {
  animation: reel-blur 0.1s infinite;
  border-color: rgba(6, 182, 212, 0.6);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(6, 182, 212, 0.3),
    0 0 32px rgba(6, 182, 212, 0.1);
}
.bp-slot__reel.landed {
  transform: scale(1.08);
  border-color: rgba(6, 182, 212, 0.8);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(6, 182, 212, 0.4),
    0 0 40px rgba(139, 92, 246, 0.2);
  animation: reel-land 0.35s ease-out;
}
@keyframes reel-blur {
  0% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(2px);
  }
  100% {
    transform: translateY(-2px);
  }
}
@keyframes reel-land {
  0% {
    transform: scale(1.25);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.1);
  }
}
.bp-slot__sym {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: 6px;
}

/* 잭팟/보너스 텍스트 이펙트 */
.bp-overlay__jackpot {
  font-size: 20px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow:
    0 0 20px rgba(251, 191, 36, 0.8),
    0 0 40px rgba(251, 191, 36, 0.4);
  animation: jackpot-glow 0.6s ease-in-out infinite alternate;
  letter-spacing: 3px;
  margin: 4px 0;
}
.bp-overlay__bonus {
  font-size: 16px;
  font-weight: 700;
  color: #4ade80;
  text-shadow: 0 0 12px rgba(74, 222, 128, 0.6);
  animation: bonus-pop 0.5s ease-out;
  margin: 4px 0;
}
@keyframes jackpot-glow {
  from {
    text-shadow:
      0 0 20px rgba(251, 191, 36, 0.8),
      0 0 40px rgba(251, 191, 36, 0.4);
    transform: scale(1);
  }
  to {
    text-shadow:
      0 0 30px rgba(251, 191, 36, 1),
      0 0 60px rgba(251, 191, 36, 0.6);
    transform: scale(1.05);
  }
}
@keyframes bonus-pop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
.bp-slot__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bp-slot__id {
  font-family: var(--gb-font-display);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 1.5px;
}
.bp-slot__badge {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  backdrop-filter: blur(8px);
  border: 1px solid transparent;
}
.bp-slot__badge--short {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.2);
}
.bp-slot__badge--long {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.2);
}

/* --- 착지 플래시 이펙트 --- */
.bp-slot__land-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(6, 182, 212, 0.4) 40%,
    transparent 70%
  );
  border-radius: 10px;
  animation: land-flash 0.5s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}
@keyframes land-flash {
  0% {
    opacity: 1;
    transform: scale(0.8);
  }
  40% {
    opacity: 0.7;
    transform: scale(1.3);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* === 라이트세이버 네온 버스트 === */
.bp-slot__neon-burst {
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  pointer-events: none;
  z-index: 6;
  animation: neon-burst 0.8s ease-out forwards;
}
@keyframes neon-burst {
  0% {
    opacity: 1;
    transform: scale(0.9);
  }
  30% {
    opacity: 0.9;
    transform: scale(1.15);
  }
  60% {
    opacity: 0.5;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}
/* === 세이버 슬래시 (X자 빛줄기) === */
.bp-slot__saber-slash {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  z-index: 7;
  animation: saber-slash 0.6s ease-out forwards;
  opacity: 0.9;
}
.bp-slot__saber-slash--2 {
  animation-delay: 0.1s;
}
@keyframes saber-slash {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  20% {
    opacity: 1;
    transform: scaleX(1.2);
  }
  100% {
    opacity: 0;
    transform: scaleX(1.5);
  }
}
/* === 글로우 파티클 (폭발 방사형) === */
.bp-slot__glow-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  animation: glow-explode 0.7s ease-out forwards;
}
@keyframes glow-explode {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  40% {
    transform: scale(2.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
/* === 에너지 링 (확장 원형) === */
.bp-slot__energy-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 2px solid;
  border-radius: 50%;
  pointer-events: none;
  z-index: 7;
  animation: energy-ring-expand 0.8s ease-out forwards;
}
@keyframes energy-ring-expand {
  0% {
    transform: scale(0.3);
    opacity: 1;
  }
  50% {
    transform: scale(2.5);
    opacity: 0.7;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* --- 잭팟 릴 골드 글로우 --- */
.bp-slot--jackpot .bp-slot__reel {
  border-color: rgba(251, 191, 36, 0.9) !important;
  box-shadow:
    0 0 20px rgba(251, 191, 36, 0.5),
    0 0 40px rgba(251, 191, 36, 0.3),
    0 0 80px rgba(251, 191, 36, 0.15),
    inset 0 0 20px rgba(251, 191, 36, 0.1) !important;
  animation: jackpot-reel-glow 0.4s ease-in-out infinite alternate !important;
}
@keyframes jackpot-reel-glow {
  from {
    box-shadow:
      0 0 20px rgba(251, 191, 36, 0.5),
      0 0 40px rgba(251, 191, 36, 0.3),
      inset 0 0 20px rgba(251, 191, 36, 0.1);
  }
  to {
    box-shadow:
      0 0 30px rgba(251, 191, 36, 0.8),
      0 0 60px rgba(251, 191, 36, 0.5),
      0 0 100px rgba(251, 191, 36, 0.2),
      inset 0 0 30px rgba(251, 191, 36, 0.2);
  }
}

/* --- 보너스 릴 시안 글로우 --- */
.bp-slot--bonus .bp-slot__reel {
  border-color: rgba(74, 222, 128, 0.8) !important;
  box-shadow:
    0 0 16px rgba(74, 222, 128, 0.4),
    0 0 32px rgba(74, 222, 128, 0.2),
    inset 0 0 16px rgba(74, 222, 128, 0.08) !important;
  animation: bonus-reel-pulse 0.6s ease-in-out infinite alternate !important;
}
@keyframes bonus-reel-pulse {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1.12);
  }
}

/* --- 결과 오버레이 (풀스크린) --- */
.bp-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: overlay-enter 0.4s ease-out;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.bp-overlay--win {
  background: radial-gradient(
    ellipse at center,
    rgba(34, 197, 94, 0.15) 0%,
    rgba(0, 0, 0, 0.85) 70%
  );
}
.bp-overlay--lose {
  background: radial-gradient(
    ellipse at center,
    rgba(239, 68, 68, 0.12) 0%,
    rgba(0, 0, 0, 0.85) 70%
  );
}
@keyframes overlay-enter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.bp-overlay__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 36px;
  background: rgba(10, 8, 20, 0.7);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 24px;
  text-align: center;
  box-shadow:
    0 16px 64px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: card-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes card-pop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.bp-result-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.3);
}
.bp-result-circle__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bp-overlay__title {
  font-family: var(--gb-font-display);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
}
.bp-overlay--win .bp-overlay__title {
  color: #4ade80;
  text-shadow:
    0 0 24px rgba(74, 222, 128, 0.6),
    0 0 60px rgba(74, 222, 128, 0.3);
}
.bp-overlay--lose .bp-overlay__title {
  color: #f87171;
  text-shadow:
    0 0 24px rgba(248, 113, 113, 0.6),
    0 0 60px rgba(248, 113, 113, 0.3);
}
.bp-overlay__amount {
  font-family: var(--gb-font-display);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 1px;
}
.bp-overlay--win .bp-overlay__amount {
  color: #4ade80;
  text-shadow: 0 0 16px rgba(74, 222, 128, 0.5);
}
.bp-overlay--lose .bp-overlay__amount {
  color: #f87171;
  text-shadow: 0 0 16px rgba(248, 113, 113, 0.5);
}
.bp-overlay__meta,
.bp-overlay__fee {
  font-family: var(--gb-font-display);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
}
.bp-overlay__tap {
  font-family: var(--gb-font-display);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 2px;
  margin-top: 8px;
  animation: blink 1.5s infinite;
}

/* --- 잭팟 전체 화면 골드 플래시 --- */
.bp-overlay--win:has(.bp-overlay__jackpot) {
  background: radial-gradient(
    ellipse at center,
    rgba(251, 191, 36, 0.25) 0%,
    rgba(0, 0, 0, 0.85) 70%
  );
}
.bp-overlay--win:has(.bp-overlay__jackpot) .bp-overlay__card {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow:
    0 0 40px rgba(251, 191, 36, 0.3),
    0 0 80px rgba(251, 191, 36, 0.15),
    0 16px 64px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation:
    card-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    jackpot-card-glow 0.5s ease-in-out infinite alternate;
}
@keyframes jackpot-card-glow {
  from {
    box-shadow:
      0 0 40px rgba(251, 191, 36, 0.3),
      0 0 80px rgba(251, 191, 36, 0.15);
  }
  to {
    box-shadow:
      0 0 60px rgba(251, 191, 36, 0.5),
      0 0 120px rgba(251, 191, 36, 0.25);
  }
}

/* --- 컨페티 --- */
.bp-confetti {
  position: fixed;
  inset: 0;
  z-index: 201;
  pointer-events: none;
  overflow: hidden;
}
.bp-confetti__dot {
  position: absolute;
  top: -10px;
  border-radius: 50%;
  animation: confetti-fall 2.5s ease-in forwards;
}
@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg) scale(0.3);
    opacity: 0;
  }
}

/* --- 게임 중 네비바 잠금 --- */
body.gb-gaming .bottom-nav {
  /* [2026-07-09] 게임 중에도 네비 클릭 가능 — 걸어놓고 나가도 라운드는 서버가 계속 돌려 결과·지급됨(연속성) */
  opacity: 0.85;
  transition: all 0.3s;
}

/* [2026-07-09] 버튼·게임 컨트롤 텍스트 드래그선택·복사 금지 (PLACE BET 복사팝업 방지). 주소·입력창은 제외. */
button, .nav-item, .nav-label, .pb-btn, .bp-act, .bp-act__bar, .bp-act__text,
.pb-sheet-done, .pb-sheet-clear, .pb-cartbar, .pb-amt-cell, .pb-stake-pm, .pb-stake-amt,
.bp-chips__btn, .pb-confirm-btn, .pb-sheet-title, .pb-phase-label {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* --- 릴 스파클 파티클 --- */
.bp-slot__sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #facc15;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  animation: sparkle-burst 0.7s ease-out forwards;
  box-shadow:
    0 0 6px #facc15,
    0 0 12px rgba(251, 191, 36, 0.5);
}
.bp-slot__reel:nth-child(2) .bp-slot__sparkle {
  background: #06b6d4;
  box-shadow:
    0 0 6px #06b6d4,
    0 0 12px rgba(6, 182, 212, 0.5);
}
.bp-slot__reel:nth-child(3) .bp-slot__sparkle {
  background: #a855f7;
  box-shadow:
    0 0 6px #a855f7,
    0 0 12px rgba(168, 85, 247, 0.5);
}
@keyframes sparkle-burst {
  0% {
    transform: scale(0) translate(0, 0);
    opacity: 1;
  }
  50% {
    transform: scale(2) translate(var(--sx, 10px), var(--sy, -15px));
    opacity: 1;
  }
  100% {
    transform: scale(0) translate(var(--ex, 20px), var(--ey, -30px));
    opacity: 0;
  }
}

/* --- 달러 팝 --- */
.bp-slot__dollar {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  z-index: 15;
  animation: dollar-pop 0.8s ease-out forwards;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
}
@keyframes dollar-pop {
  0% {
    transform: translateX(-50%) translateY(0) scale(0.3);
    opacity: 0;
  }
  30% {
    transform: translateX(-50%) translateY(-15px) scale(1.3);
    opacity: 1;
  }
  70% {
    transform: translateX(-50%) translateY(-25px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-35px) scale(0.5);
    opacity: 0;
  }
}

/* --- GOOD LUCK 텍스트 --- */
/* ─── Bet window countdown — Design #1 (calm pulse) ─────────── */
@keyframes bbBetPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.12);
    filter: brightness(1.35);
  }
}

/* ─── Bet window countdown — Design #2 (intense ring + arrows + shake) ─── */
@keyframes bbBetShake {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-3px, 1px); }
  40%      { transform: translate(3px, -1px); }
  60%      { transform: translate(-2px, -2px); }
  80%      { transform: translate(2px, 2px); }
}
@keyframes bbBetArrowL {
  0%   { transform: translateY(-50%) translateX(0)    scale(1);    opacity: 0.65; }
  100% { transform: translateY(-50%) translateX(-6px) scale(1.25); opacity: 1;    }
}
@keyframes bbBetArrowR {
  0%   { transform: translateY(-50%) translateX(0)   scale(1);    opacity: 0.65; }
  100% { transform: translateY(-50%) translateX(6px) scale(1.25); opacity: 1;    }
}
@keyframes bbBetNumPop {
  0%   { transform: scale(1.55); opacity: 0; }
  55%  { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* ─── PLAYING 디자인 A — 캐릭터 격투 애니메이션 ────────────────── */
@keyframes bbFighterSMove {
  0%   { transform: translateX(0px) scaleX(-1); }
  50%  { transform: translateX(6px) scaleX(-1); }
  100% { transform: translateX(0px) scaleX(-1); }
}
@keyframes bbFighterLMove {
  0%   { transform: translateX(0px); }
  50%  { transform: translateX(-6px); }
  100% { transform: translateX(0px); }
}
.bp-fighter-play--s {
  animation: bbFighterSMove 0.45s ease-in-out infinite !important;
  transform: scaleX(-1);
}
.bp-fighter-play--l {
  animation: bbFighterLMove 0.45s ease-in-out infinite !important;
}

/* ─── PLAYING overlay 공통 ─────────────────────────────────────── */
.bp-slot__playing-overlay {
  border-radius: 12px;
  overflow: hidden;
}

/* ─── GBP 잔액 부족 영구 경고 배너 ────────────────────────────── */
.gb-low-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 12px 0;
  padding: 9px 14px;
  background: linear-gradient(135deg, rgba(239,68,68,0.14) 0%, rgba(185,28,28,0.10) 100%);
  border: 1px solid rgba(239,68,68,0.38);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.18s;
}
.gb-low-banner:hover,
.gb-low-banner:active {
  background: linear-gradient(135deg, rgba(239,68,68,0.24) 0%, rgba(185,28,28,0.18) 100%);
}
.gb-low-banner__icon {
  font-size: 16px;
  flex-shrink: 0;
}
.gb-low-banner__text {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  color: #fca5a5;
  font-family: var(--gb-font-display);
  letter-spacing: 0.03em;
}
.gb-low-banner__cta {
  font-size: 10px;
  font-weight: 800;
  color: #f87171;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border: 1px solid rgba(239,68,68,0.4);
  border-radius: 6px;
  padding: 2px 7px;
  font-family: var(--gb-font-display);
  animation: bbBetPulse 1.2s ease-in-out infinite alternate;
}

.bp-slot__lucky {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--gb-font-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #facc15;
  text-shadow:
    0 0 16px rgba(251, 191, 36, 0.8),
    0 0 40px rgba(251, 191, 36, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.6);
  z-index: 20;
  animation: lucky-pop 1.5s ease-out forwards;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes lucky-pop {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 1;
  }
  40% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 1;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
.bp-slot__lucky--jackpot {
  font-size: 14px;
  color: #fbbf24;
  text-shadow:
    0 0 20px rgba(251, 191, 36, 1),
    0 0 50px rgba(251, 191, 36, 0.6),
    0 0 80px rgba(251, 191, 36, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.8);
  animation: lucky-pop 2.5s ease-out forwards;
}
.bp-slot__lucky--bonus {
  font-size: 14px;
  color: #4ade80;
  text-shadow:
    0 0 16px rgba(74, 222, 128, 0.8),
    0 0 40px rgba(74, 222, 128, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.6);
  animation: lucky-pop 2s ease-out forwards;
}

/* ===== 풀스크린 셀레브레이션 ===== */
.bp-celebration {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: celebration-enter 0.4s ease-out;
  overflow: hidden;
  will-change: opacity;
  contain: layout;
}
.bp-celebration--jackpot {
  background: radial-gradient(
    ellipse at center,
    rgba(251, 191, 36, 0.3) 0%,
    rgba(0, 0, 0, 0.92) 60%
  );
}
.bp-celebration--bonus {
  background: radial-gradient(
    ellipse at center,
    rgba(74, 222, 128, 0.2) 0%,
    rgba(0, 0, 0, 0.92) 60%
  );
}
@keyframes celebration-enter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.bp-celebration__content {
  text-align: center;
  z-index: 2;
  animation: celebration-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes celebration-pop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.bp-celebration__icon {
  font-size: 64px;
  margin-bottom: 8px;
  animation: celebration-bounce 0.6s ease-in-out infinite alternate;
}
@keyframes celebration-bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}
.bp-celebration__title {
  font-family: var(--gb-font-display);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 8px;
  margin-bottom: 8px;
}
.bp-celebration--jackpot .bp-celebration__title {
  color: #fbbf24;
  text-shadow:
    0 0 30px rgba(251, 191, 36, 1),
    0 0 60px rgba(251, 191, 36, 0.6),
    0 0 100px rgba(251, 191, 36, 0.3);
}
.bp-celebration--bonus .bp-celebration__title {
  color: #4ade80;
  text-shadow:
    0 0 30px rgba(74, 222, 128, 1),
    0 0 60px rgba(74, 222, 128, 0.6),
    0 0 100px rgba(74, 222, 128, 0.3);
}
.bp-celebration__amount {
  font-family: var(--gb-font-display);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.bp-celebration--jackpot .bp-celebration__amount {
  color: #fff;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.8);
}
.bp-celebration--bonus .bp-celebration__amount {
  color: #fff;
  text-shadow: 0 0 20px rgba(74, 222, 128, 0.8);
}
.bp-celebration__sub {
  font-family: var(--gb-font-display);
  font-size: 12px;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.5);
}
.bp-celebration__particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: particle-float 2s ease-in-out infinite alternate;
}
.bp-celebration--jackpot .bp-celebration__particle {
  background: radial-gradient(circle, #fbbf24, transparent);
  box-shadow: 0 0 12px #fbbf24;
}
.bp-celebration--bonus .bp-celebration__particle {
  background: radial-gradient(circle, #4ade80, transparent);
  box-shadow: 0 0 12px #4ade80;
}
/* ─ 배틀 시작 모드 (보라+블루 네온) ─ */
.bp-celebration--battle {
  background: radial-gradient(
    ellipse at center,
    rgba(139, 92, 246, 0.25) 0%,
    rgba(0, 0, 0, 0.92) 60%
  );
}
.bp-celebration--battle .bp-celebration__title {
  color: #a78bfa;
  text-shadow:
    0 0 30px rgba(139, 92, 246, 1),
    0 0 60px rgba(139, 92, 246, 0.6),
    0 0 100px rgba(99, 102, 241, 0.3);
}
.bp-celebration--battle .bp-celebration__amount {
  color: #c4b5fd;
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.8);
}
.bp-celebration--battle .bp-celebration__ring {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow:
    0 0 20px rgba(139, 92, 246, 0.3),
    inset 0 0 20px rgba(139, 92, 246, 0.1);
}
.bp-celebration--battle .bp-celebration__ray {
  background: linear-gradient(to top, rgba(139, 92, 246, 0.4), transparent);
}
.bp-celebration--battle .bp-celebration__card {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow:
    0 0 40px rgba(139, 92, 246, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.5);
}
.bp-celebration--battle .bp-celebration__particle {
  background: radial-gradient(circle, #8b5cf6, transparent);
  box-shadow: 0 0 12px #8b5cf6;
}
.bp-celebration--battle .bp-celebration__coin {
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.6));
}
@keyframes particle-float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-30px) scale(0.5);
    opacity: 0.2;
  }
}

/* 회전 링버스트 */
.bp-celebration__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 2px solid;
  pointer-events: none;
  z-index: 1;
}
.bp-celebration__ring--1 {
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  animation: ring-burst 2.5s ease-out infinite;
}
.bp-celebration__ring--2 {
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  animation: ring-burst 3s ease-out infinite 0.5s;
}
.bp-celebration--jackpot .bp-celebration__ring {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow:
    0 0 20px rgba(251, 191, 36, 0.3),
    inset 0 0 20px rgba(251, 191, 36, 0.1);
}
.bp-celebration--bonus .bp-celebration__ring {
  border-color: rgba(74, 222, 128, 0.6);
  box-shadow:
    0 0 20px rgba(74, 222, 128, 0.3),
    inset 0 0 20px rgba(74, 222, 128, 0.1);
}
@keyframes ring-burst {
  0% {
    transform: scale(0.3) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(2.5) rotate(180deg);
    opacity: 0;
  }
}

/* 광선 */
.bp-celebration__ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 50vh;
  transform-origin: bottom center;
  pointer-events: none;
  z-index: 0;
  animation: ray-pulse 1.5s ease-in-out infinite alternate;
}
.bp-celebration--jackpot .bp-celebration__ray {
  background: linear-gradient(to top, rgba(251, 191, 36, 0.5), transparent);
}
.bp-celebration--bonus .bp-celebration__ray {
  background: linear-gradient(to top, rgba(74, 222, 128, 0.4), transparent);
}
@keyframes ray-pulse {
  0% {
    opacity: 0.3;
    height: 30vh;
  }
  100% {
    opacity: 0.8;
    height: 50vh;
  }
}

/* 글라스 카드 */
.bp-celebration__card {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 32px 40px;
  animation: card-entrance 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform, opacity;
}
.bp-celebration--jackpot .bp-celebration__card {
  border-color: rgba(251, 191, 36, 0.3);
  box-shadow:
    0 0 40px rgba(251, 191, 36, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.5);
}
.bp-celebration--bonus .bp-celebration__card {
  border-color: rgba(74, 222, 128, 0.3);
  box-shadow:
    0 0 40px rgba(74, 222, 128, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.5);
}
@keyframes card-entrance {
  0% {
    transform: scale(0.2) rotateY(90deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotateY(-10deg);
  }
  100% {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }
}

/* 베팅 금액 텍스트 */
.bp-celebration__bet {
  font-family: var(--gb-font-display);
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 코인 레인 */
.bp-celebration__coin {
  position: absolute;
  top: -30px;
  pointer-events: none;
  z-index: 5;
  will-change: transform;
  transform: translateZ(0);
  animation: coin-rain linear forwards;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
}
@keyframes coin-rain {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
  }
}

/* --- 하단 고정 패널 (글라스모피즘) --- */
.bp-bottom {
  background: rgba(10, 8, 20, 0.85);
  backdrop-filter: blur(20px);
  border-top: 1.5px solid rgba(139, 92, 246, 0.4);
  padding: 6px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow:
    0 -8px 32px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(139, 92, 246, 0.15);
  animation: neon-purple 3s ease-in-out infinite 1s;
}
.bp-chips {
  display: flex;
  gap: 6px;
}
.bp-chips__btn {
  font-family: var(--gb-font-display);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 0;
  flex: 1;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.25s;
  letter-spacing: 0.5px;
}
.bp-chips__btn:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.25);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.1);
}
.bp-chips__btn.active {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.5);
  color: #22d3ee;
  box-shadow:
    0 0 20px rgba(6, 182, 212, 0.2),
    inset 0 0 12px rgba(6, 182, 212, 0.06);
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}
.bp-chips__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* --- 베팅 버튼 (3D 프리미엄) --- */
.bp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bp-act-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bp-act__bar {
  background: rgba(0, 0, 0, 0.85);
  text-align: center;
  padding: 4px 0;
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
  border-radius: 0 0 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
}
.bp-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
  min-height: 52px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.bp-act::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  );
  border-radius: inherit;
  pointer-events: none;
}
.bp-act:active:not(:disabled) {
  transform: scale(0.96);
}
.bp-act:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.bp-act__icon {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 12px currentColor;
}
.bp-act__text {
  font-family: var(--gb-font-display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 5px;
  color: #fff;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.5),
    0 0 20px currentColor;
}
.bp-act__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.bp-act__sub {
  font-family: var(--gb-font-display);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
}
.bp-act--short {
  background: url("/images/btn_short.png") center/cover no-repeat;
  border: 2px solid rgba(248, 113, 113, 0.5);
  box-shadow:
    0 6px 24px rgba(185, 28, 28, 0.4),
    0 0 12px rgba(239, 68, 68, 0.3);
  animation: neon-short 2.5s ease-in-out infinite;
}
.bp-act--short:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 8px 32px rgba(239, 68, 68, 0.5),
    0 0 40px rgba(239, 68, 68, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border-color: rgba(248, 113, 113, 0.5);
}
.bp-act--long {
  background: url("/images/btn_long.png") center/cover no-repeat;
  border: 2px solid rgba(74, 222, 128, 0.5);
  box-shadow:
    0 6px 24px rgba(22, 163, 74, 0.4),
    0 0 12px rgba(34, 197, 94, 0.3);
  animation: neon-long 2.5s ease-in-out infinite 0.3s;
}
.bp-act--long:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 8px 32px rgba(34, 197, 94, 0.5),
    0 0 40px rgba(34, 197, 94, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border-color: rgba(74, 222, 128, 0.5);
}

/* --- 반응형: 작은 화면 대응 --- */
@media (max-height: 720px) {
  .bp-hero__val {
    font-size: 18px;
  }
  .bp-hero__pair {
    font-size: 10px;
  }
  .bp-hero__chg {
    font-size: 12px;
    padding: 4px 10px;
  }
  .bp-hero__overlay {
    padding: 10px 12px 8px;
  }
  .bp-char {
    width: 50px;
    height: 50px;
  }
  .bp-power {
    padding: 4px 12px;
  }
  .bp-power__bar {
    height: 24px;
  }
  .bp-power__label {
    font-size: 9px;
  }
  .bp-slot {
    padding: 4px 8px;
  }
  .bp-slot__reel {
    width: clamp(90px, 28vw, 160px);
    height: clamp(100px, 30vw, 170px);
  }
  .bp-slot__sym {
    width: 100%;
    height: 100%;
  }
  .bp-bottom {
    padding: 4px 12px 6px;
    gap: 4px;
  }
  .bp-chips__btn {
    font-size: 10px;
    padding: 4px 0;
  }
  .bp-act {
    padding: 8px 0;
  }
  .bp-act__text {
    font-size: 14px;
  }
  .bp-act__sub {
    font-size: 9px;
  }
  .bp-video-player {
    max-height: 35vh;
  }
  .bp-chart-toggle__btn {
    font-size: 9px;
    padding: 2px 6px;
  }
}
@media (max-height: 600px) {
  .bp-hero__val {
    font-size: 16px;
  }
  .bp-char {
    width: 44px;
    height: 44px;
  }
  .bp-power__bar {
    height: 22px;
  }
  .bp-slot__reel {
    width: clamp(80px, 26vw, 140px);
    height: clamp(80px, 26vw, 140px);
  }
  .bp-slot__sym {
    width: 100%;
    height: 100%;
  }
  .bp-bottom {
    padding: 4px 10px 8px;
    gap: 4px;
  }
  .bp-chips__btn {
    font-size: 9px;
    padding: 4px 0;
  }
  .bp-act {
    padding: 8px 0;
  }
  .bp-act__text {
    font-size: 14px;
    letter-spacing: 3px;
  }
  .bp-video-player {
    max-height: 180px;
  }
}

/* --- 결과 오버레이 (프리미엄 — 항상 렌더, CSS 토글) --- */
.bp-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 15, 0.88);
  backdrop-filter: blur(24px);
  will-change: opacity, transform;
  transform: translateZ(0);
  contain: layout style;
  transition: opacity 0.35s ease-out;
}
.bp-overlay--hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.bp-overlay--visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  animation: overlay-in 0.4s ease-out;
}
@keyframes overlay-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.bp-overlay__card {
  text-align: center;
  padding: 40px 48px;
  background: rgba(15, 12, 30, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 24px;
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.bp-overlay__char {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 16px;
  border-radius: 50%;
  border: 3px solid rgba(139, 92, 246, 0.4);
  animation: overlay-char-pulse 1.5s ease-in-out infinite;
}
.bp-overlay__char--win {
  border-color: rgba(74, 222, 128, 0.6);
  box-shadow:
    0 0 40px rgba(74, 222, 128, 0.3),
    0 0 80px rgba(74, 222, 128, 0.1);
  filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.5));
}
.bp-overlay__char--lose {
  border-color: rgba(248, 113, 113, 0.6);
  box-shadow: 0 0 40px rgba(248, 113, 113, 0.3);
  filter: grayscale(0.5) drop-shadow(0 0 20px rgba(248, 113, 113, 0.4));
}
/* 원형 결과 영상 */
.bp-result-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  border: 3px solid rgba(139, 92, 246, 0.5);
  box-shadow:
    0 0 30px rgba(139, 92, 246, 0.3),
    0 0 60px rgba(139, 92, 246, 0.1),
    inset 0 0 20px rgba(0, 0, 0, 0.3);
  animation: overlay-char-pulse 1.5s ease-in-out infinite;
  position: relative;
}
.bp-result-circle__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
@keyframes overlay-char-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.bp-overlay__title {
  font-family: var(--gb-font-display);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 8px;
  margin-bottom: 10px;
}
.bp-overlay--win .bp-overlay__title {
  color: #4ade80;
  text-shadow:
    0 0 40px rgba(74, 222, 128, 0.5),
    0 0 80px rgba(74, 222, 128, 0.2);
}
.bp-overlay--lose .bp-overlay__title {
  color: #f87171;
  text-shadow:
    0 0 40px rgba(248, 113, 113, 0.5),
    0 0 80px rgba(248, 113, 113, 0.2);
}
.bp-overlay__amount {
  font-family: var(--gb-font-display);
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 14px;
}
.bp-overlay--win .bp-overlay__amount {
  color: #4ade80;
  text-shadow: 0 0 30px rgba(74, 222, 128, 0.4);
}
.bp-overlay--lose .bp-overlay__amount {
  color: #f87171;
  text-shadow: 0 0 30px rgba(248, 113, 113, 0.4);
}
.bp-overlay__meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
  letter-spacing: 1.5px;
}
.bp-overlay__fee {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 12px;
}
.bp-overlay__tap {
  font-family: var(--gb-font-display);
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.3);
  animation: blink 1.5s infinite;
}

.bp-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}
.bp-confetti__dot {
  position: absolute;
  top: -10px;
  border-radius: 50%;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}
.wallet-page {
  padding: 0 16px 90px;
  min-height: 100%;
}

/* --- 히어로 --- */
.wp-hero {
  margin: 0 -16px;
  padding: 28px 24px 24px;
  position: relative;
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

.wp-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(139, 92, 246, 0.1) 0%,
    rgba(6, 182, 212, 0.05) 50%,
    transparent 100%
  );
  z-index: 0;
}

.wp-hero-content {
  position: relative;
  z-index: 1;
}

.wp-hero-label {
  font-family: var(--gb-font-display);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--gb-text-muted);
  margin-bottom: 8px;
}

.wp-hero-amount {
  font-family: var(--gb-font-display);
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
}

.wp-hero-change {
  font-family: var(--gb-font-display);
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
}

.wp-up {
  color: #22c55e;
}
.wp-down {
  color: #ef4444;
}

/* --- 퀵 액션 --- */
.wp-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 16px 0;
}

.wp-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--gb-bg-card);
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(8px);
}

.wp-action-btn:hover {
  border-color: rgba(6, 182, 212, 0.2);
  background: rgba(6, 182, 212, 0.05);
  transform: translateY(-2px);
}

.wp-action-icon {
  font-size: 20px;
}

.wp-action-label {
  font-family: var(--gb-font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gb-text-secondary);
}

.wp-deposit {
  border-color: rgba(34, 197, 94, 0.15);
}
.wp-deposit:hover {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.05);
}

.wp-withdraw {
  border-color: rgba(239, 68, 68, 0.15);
}
.wp-withdraw:hover {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.05);
}

/* --- 입금 패널 --- */
.wp-deposit-panel {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--gb-bg-card);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-radius: 16px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wp-deposit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-family: var(--gb-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gb-text-primary);
}

.wp-deposit-network {
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.wp-qr-placeholder {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.wp-qr-box {
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gb-font-display);
  font-size: 18px;
  font-weight: 900;
  color: #333;
}

.wp-address-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  margin-bottom: 10px;
}

.wp-address-text {
  font-family: var(--gb-font-mono);
  font-size: 12px;
  color: var(--gb-text-secondary);
  letter-spacing: 0.5px;
}

.wp-copy-btn {
  font-family: var(--gb-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(6, 182, 212, 0.3);
  background: rgba(6, 182, 212, 0.1);
  color: var(--gb-cyan);
  cursor: pointer;
  transition: all 0.2s;
}

.wp-copy-btn:hover {
  background: rgba(6, 182, 212, 0.2);
}

.wp-deposit-warning {
  font-size: 10px;
  color: #f59e0b;
  padding: 8px 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 8px;
  line-height: 1.5;
}

/* --- 탭 (wallet.css에서 관리) --- */

/* --- 자산 카드 --- */
.wp-asset-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: var(--gb-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition: all 0.3s;
  backdrop-filter: blur(8px);
}

.wp-asset-card:hover {
  border-color: rgba(6, 182, 212, 0.15);
  transform: translateX(3px);
}

.wp-asset-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wp-asset-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.wp-asset-name {
  font-family: var(--gb-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--gb-text-primary);
  letter-spacing: 0.5px;
}

.wp-asset-network {
  font-family: var(--gb-font-display);
  font-size: 9px;
  color: var(--gb-text-muted);
  letter-spacing: 1px;
  margin-top: 2px;
}

.wp-asset-right {
  text-align: right;
}

.wp-asset-balance {
  font-family: var(--gb-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--gb-text-primary);
}

.wp-asset-usd {
  font-family: var(--gb-font-display);
  font-size: 10px;
  color: var(--gb-text-muted);
  margin-top: 2px;
}

/* --- 히스토리 --- */
.wp-history-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 6px;
  background: var(--gb-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  transition: all 0.2s;
}

.wp-history-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
}

.wp-history-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wp-history-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.wp-h-positive {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.wp-h-negative {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.wp-history-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--gb-text-primary);
}

.wp-history-desc {
  font-size: 9px;
  color: var(--gb-text-muted);
  margin-top: 2px;
}

.wp-history-right {
  text-align: right;
}

.wp-history-amount {
  font-family: var(--gb-font-display);
  font-size: 13px;
  font-weight: 700;
}

.wp-h-positive-text {
  color: #22c55e;
}
.wp-h-negative-text {
  color: #ef4444;
}

.wp-history-time {
  font-size: 9px;
  color: var(--gb-text-muted);
  margin-top: 2px;
}

/* ─── History Filter Bar ─── */
.wp-hist-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(20, 14, 36, 0.5);
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 10px;
}
.wp-hist-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wp-hist-filter-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gb-text-muted);
  text-transform: uppercase;
  min-width: 50px;
}
.wp-hist-chip {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  background: transparent;
  color: var(--gb-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.wp-hist-chip:hover {
  border-color: rgba(139, 92, 246, 0.5);
  color: #e9d5ff;
}
.wp-hist-chip.active {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  border-color: transparent;
  color: white;
}
/* ─── History Type Grid ─── */
.wp-hist-type-section {
  padding: 10px 0 4px;
}
.wp-hist-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.wp-hist-type-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.wp-hist-type-chip:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.75);
}
.wp-hist-type-chip.active {
  font-weight: 600;
}
.wp-hist-type-icon {
  font-size: 12px;
  line-height: 1;
}
/* legacy select (미사용) */
.wp-hist-select {
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 6px;
  background: rgba(20, 14, 36, 0.8);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #e9d5ff;
  cursor: pointer;
  flex: 1;
  min-width: 140px;
}
.wp-hist-select:focus { outline: none; border-color: #a855f7; }
.wp-hist-select option { background: #1a0d2e; color: #e9d5ff; }

/* =============================================
   Phase 1 — History Filter Collapsible Bar
   ============================================= */

/* 항상 보이는 필터 바 (44px) */
.wp-hist-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  min-height: 44px;
  background: rgba(20, 14, 36, 0.55);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 10px;
}
.wp-hist-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.wp-hist-filter-toggle:hover {
  background: rgba(139, 92, 246, 0.18);
  color: #ddd6fe;
}
.wp-hist-filter-toggle.open {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  border-color: transparent;
  color: white;
}
.wp-hist-filter-toggle-icon {
  display: inline-block;
  font-size: 9px;
  transition: transform 0.2s;
}
.wp-hist-filter-toggle.open .wp-hist-filter-toggle-icon {
  transform: rotate(180deg);
}
.wp-hist-filter-toggle-label { line-height: 1; }

.wp-hist-active-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.wp-hist-active-chips::-webkit-scrollbar { display: none; }

.wp-hist-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: #e9d5ff;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
  flex-shrink: 0;
  white-space: nowrap;
}
.wp-hist-active-chip:hover {
  background: rgba(139, 92, 246, 0.22);
}
.wp-hist-active-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  margin-left: 2px;
}
.wp-hist-active-chip:hover .wp-hist-active-chip-x {
  color: white;
  background: rgba(255, 255, 255, 0.12);
}

.wp-hist-filter-clear {
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.85);
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
  flex-shrink: 0;
}
.wp-hist-filter-clear:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

/* 접힘/펼침 패널 — 기존 .wp-hist-filter 위에 모디파이어로 작동 */
.wp-hist-filter-collapsed {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
}
.wp-hist-filter-expanded {
  max-height: 480px;
  overflow: hidden;
  opacity: 1;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease 0.05s;
}

/* 카테고리 row (6개 칩 가로 1줄) */
.wp-hist-cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.wp-hist-cat-chip {
  flex: 1 1 auto;
  min-width: 56px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.wp-hist-cat-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}
.wp-hist-cat-chip.active {
  font-weight: 700;
}

/* 서브타입 row (선택된 카테고리의 하위 타입들) */
.wp-hist-subtype-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  padding: 8px 0 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.wp-hist-subtype-chip {
  padding: 5px 10px;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.wp-hist-subtype-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}
.wp-hist-subtype-chip.active {
  font-weight: 700;
}

/* =============================================
   Phase 1 — History Loading Skeleton
   ============================================= */
.wp-hist-skeleton {
  display: flex;
  flex-direction: column;
}
.wp-hist-skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  min-height: 76px;
}
.wp-hist-skeleton-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(139,92,246,0.08) 0%, rgba(139,92,246,0.18) 50%, rgba(139,92,246,0.08) 100%);
  background-size: 200% 100%;
  animation: wpSkeletonShimmer 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.wp-hist-skeleton-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wp-hist-skeleton-bar {
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: wpSkeletonShimmer 1.4s ease-in-out infinite;
}
.wp-hist-skeleton-amount {
  width: 72px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(16,185,129,0.06) 0%, rgba(16,185,129,0.16) 50%, rgba(16,185,129,0.06) 100%);
  background-size: 200% 100%;
  animation: wpSkeletonShimmer 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes wpSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── History Summary Cards ─── */
.wp-hist-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.wp-hist-sum-card {
  flex: 1;
  min-width: 105px;
  padding: 10px;
  background: rgba(20, 14, 36, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
}
.wp-hist-sum-token {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #a78bfa;
  margin-bottom: 4px;
}
.wp-hist-sum-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}
.wp-hist-sum-net {
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  letter-spacing: -0.01em;
}

/* ─── Date Group Header ─── */
.wp-hist-group {
  margin-bottom: 16px;
}
.wp-hist-group-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #a78bfa;
  padding: 8px 4px 6px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.18);
  margin-bottom: 8px;
}

/* =============================================
   ARENA PAGE — 모바일 최적화
   ============================================= */

/* 헤더 */
.ap-header {
  display: block;
  width: 100%;
  padding: 12px 0 14px;
}

.ap-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ap-title {
  font-family: var(--gb-font-display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--gb-text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}

.ap-title-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.ap-live-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--gb-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #22c55e;
  padding: 5px 11px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  flex-shrink: 0;
}

.ap-live-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

/* 통계 바 */
.ap-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 12px;
  background: var(--gb-bg-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  width: 100%;
  box-sizing: border-box;
}

.ap-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ap-stat-value {
  font-family: var(--gb-font-display);
  font-size: 13px;
  font-weight: 900;
  color: var(--gb-text-primary);
  white-space: nowrap;
}

.ap-stat-label {
  font-family: var(--gb-font-display);
  font-size: 7px;
  letter-spacing: 1.5px;
  color: var(--gb-text-muted);
  white-space: nowrap;
}

.ap-stat-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* 게임 카드 그리드 */
.ap-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
}
/* [2026-07-11] 이미지 없는 게임 카드(로또·배틀) 본문 */
.ap-card-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 22px;
  gap: 6px;
}
.ap-card-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}
.ap-card-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.01em;
}

/* 게임 카드 */
.ap-game-card {
  display: block;
  border-radius: 18px;
  border: 1.5px solid;
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  animation: card-enter 0.4s ease-out both;
}

.ap-game-card:active {
  transform: scale(0.97);
}

.ap-game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35);
}

/* 캐러셀 래퍼 — 카드 전체 채움 */
.ap-carousel-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

/* LIVE 태그 — 절대 위치 (좌상단) */
.ap-card-tag-abs {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--gb-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #22c55e;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(34, 197, 94, 0.4);
  backdrop-filter: blur(6px);
}

/* 하단 오버레이 (PLAY 버튼) */
.ap-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 28px 16px 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  border-radius: 0 0 16px 16px;
}

.ap-card-play {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 7px 18px;
  border-radius: 20px;
  border: 1px solid;
  transition: transform 0.25s;
}

.ap-game-card:hover .ap-card-play {
  transform: translateX(3px);
}

/* legacy — 기존 CSS에서 참조하는 경우 남겨둠 */
.ap-card-tag {
  display: inline-block;
  font-family: var(--gb-font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
}
.ap-subtitle { display: none; }
.ap-header-top { display: none; }

/* === Global Utility Classes === */
.glass-card {
  background: rgba(10, 10, 25, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.glass-card:hover {
  border-color: rgba(6, 182, 212, 0.3);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.08);
}

/* Flex utilities */
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-3 {
  gap: 12px;
}
.gap-4 {
  gap: 16px;
}
.mt-3 {
  margin-top: 12px;
}

/* Page fade-in */
.page {
  padding: 16px;
  animation: fade-in 0.3s ease-out;
}

/* === Premium Button System === */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  font-family: var(--gb-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #fff;
  background: linear-gradient(135deg, var(--gb-cyan), #0891b2);
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary:hover {
  box-shadow: 0 6px 30px rgba(6, 182, 212, 0.5);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.2);
}

.btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  font-family: var(--gb-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-danger:hover {
  box-shadow: 0 6px 30px rgba(239, 68, 68, 0.5);
  transform: translateY(-1px);
}

.btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: transparent;
  color: var(--gb-text-primary);
  font-family: var(--gb-font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-ghost:hover {
  border-color: var(--gb-cyan);
  color: var(--gb-cyan);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
}

/* =============================================
   HOMEPAGE STYLES
   ============================================= */
.home-page {
  padding: 16px;
  animation: fade-in 0.3s ease-out;
}

/* GoldenBall Index Hero */
.gb-index-hero {
  background: rgba(10, 10, 25, 0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(6, 182, 212, 0.15);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 12px;
  animation: border-glow 4s ease-in-out infinite;
}
.gb-index-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gb-font-display);
  font-size: 11px;
  color: var(--gb-text-secondary);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.gb-index-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gb-cyan);
  box-shadow: 0 0 10px var(--gb-cyan);
  animation: pulse-glow 2s infinite;
}
.gb-index-live {
  font-size: 9px;
  color: var(--gb-emerald);
  background: rgba(16, 185, 129, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 1.5px;
}
.gb-index-price {
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.5px;
  transition: color 0.3s;
}
.gb-index-price.price-up {
  color: var(--gb-long-color);
}
.gb-index-price.price-down {
  color: var(--gb-short-color);
}

.gb-index-change {
  font-family: var(--gb-font-display);
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* Exchange prices grid */
.exchange-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.exchange-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exchange-name {
  font-family: var(--gb-font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
}
.exchange-weight {
  font-size: 8px;
  color: var(--gb-text-muted);
}
.exchange-price {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--gb-text-primary);
}

/* Mini Chart */
.gb-chart-section {
  background: rgba(10, 10, 25, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}
.chart-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.chart-title {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--gb-text-secondary);
  letter-spacing: 1px;
}
.chart-stats {
  display: flex;
  gap: 10px;
}
.chart-stat {
  font-size: 9px;
  color: var(--gb-text-muted);
}
.chart-stat strong {
  color: var(--gb-text-primary);
  font-weight: 600;
}
.home-chart-canvas {
  width: 100%;
  height: 280px;
  border-radius: 8px;
}

/* Quick Actions */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s;
  color: #fff;
}
.quick-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.action-battle {
  background: linear-gradient(
    145deg,
    rgba(225, 29, 72, 0.2),
    rgba(139, 92, 246, 0.15)
  );
  border-color: rgba(225, 29, 72, 0.25);
}
.action-battle:hover {
  border-color: rgba(225, 29, 72, 0.5);
}
.action-arena {
  background: linear-gradient(
    145deg,
    rgba(6, 182, 212, 0.2),
    rgba(16, 185, 129, 0.15)
  );
  border-color: rgba(6, 182, 212, 0.25);
}
.action-arena:hover {
  border-color: rgba(6, 182, 212, 0.5);
}

.qa-icon {
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qa-label {
  font-family: var(--gb-font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.5px;
}
.qa-sub {
  font-size: 9px;
  color: var(--gb-text-muted);
  letter-spacing: 0.5px;
}

/* Live Stats Bar */
.live-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(10, 10, 25, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 8px;
  margin-bottom: 16px;
}
.live-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ls-value {
  font-family: var(--gb-font-display);
  font-weight: 800;
  font-size: 14px;
}
.ls-label {
  font-family: var(--gb-font-display);
  font-size: 8px;
  color: var(--gb-text-muted);
  letter-spacing: 1.5px;
}
.live-stat-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.08);
}

/* Recent Activity */
.recent-section {
  margin-bottom: 16px;
}
.activity-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10, 10, 25, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 6px;
  transition: border-color 0.2s;
}
.activity-card:hover {
  border-color: rgba(6, 182, 212, 0.2);
}
.ac-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ac-badge {
  font-family: var(--gb-font-display);
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
}
.ac-win {
  background: rgba(34, 197, 94, 0.2);
  color: var(--gb-long-color);
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.ac-lose {
  background: rgba(239, 68, 68, 0.2);
  color: var(--gb-short-color);
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.ac-side {
  font-family: var(--gb-font-display);
  font-size: 10px;
  color: var(--gb-text-secondary);
  letter-spacing: 1px;
}
.ac-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.ac-amount {
  font-family: var(--gb-font-display);
  font-weight: 800;
  font-size: 13px;
}
.ac-time {
  font-size: 9px;
  color: var(--gb-text-muted);
}

/* =============================================
   BATTLE RESULT OVERLAY
   ============================================= */
.bp-result-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 200;
  animation: fade-in 0.3s ease-out;
}
.bp-result-overlay.win {
  background: radial-gradient(
    circle,
    rgba(34, 197, 94, 0.2),
    rgba(5, 5, 8, 0.95)
  );
}
.bp-result-overlay.lose {
  background: radial-gradient(
    circle,
    rgba(239, 68, 68, 0.2),
    rgba(5, 5, 8, 0.95)
  );
}
.bp-result-icon {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
}
.bp-result-overlay.win .bp-result-icon {
  color: var(--gb-gold);
  text-shadow: 0 0 30px rgba(250, 204, 21, 0.5);
}
.bp-result-overlay.lose .bp-result-icon {
  color: var(--gb-short-color);
  text-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
}
.bp-result-title {
  font-family: var(--gb-font-display);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 4px;
}
.bp-result-win {
  color: var(--gb-long-color);
}
.bp-result-lose {
  color: var(--gb-short-color);
}

.bp-result-amount {
  font-family: var(--gb-font-display);
  font-size: 22px;
  font-weight: 800;
}
.bp-result-detail {
  font-family: var(--gb-font-display);
  font-size: 10px;
  color: var(--gb-text-muted);
  letter-spacing: 1.5px;
  margin-top: 8px;
}
.bp-result-payout {
  font-size: 10px;
  color: var(--gb-text-muted);
  letter-spacing: 0.5px;
}

/* =============================================
   STAKING PAGE STYLES
   ============================================= */
.sp-total-card {
  text-align: center;
  padding: 20px;
  margin-bottom: 16px;
}
.sp-total-label {
  font-size: 10px;
  color: var(--gb-text-muted);
  font-family: var(--gb-font-display);
  letter-spacing: 2px;
}
.sp-total-value {
  font-size: 28px;
  font-family: var(--gb-font-display);
  font-weight: 900;
  margin-top: 8px;
}
.sp-total-daily {
  font-size: 12px;
  color: var(--gb-long-color);
  margin-top: 4px;
  font-family: var(--gb-font-display);
}

.sp-pool-card {
  margin-bottom: 12px;
  padding: 16px;
}
.sp-pool-name {
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1px;
}
.sp-pool-type {
  font-size: 10px;
  color: var(--gb-text-muted);
  margin-top: 2px;
}
.sp-pool-right {
  text-align: right;
}
.sp-pool-apy {
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 20px;
}
.sp-pool-apy-label {
  font-size: 9px;
  color: var(--gb-text-muted);
  font-family: var(--gb-font-display);
  letter-spacing: 1px;
}
.sp-staked-info {
  font-size: 11px;
  color: var(--gb-text-secondary);
}
.sp-staked-value {
  color: #fff;
  font-weight: 700;
}
.sp-manage-btn {
  padding: 6px 16px;
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.1);
  color: var(--gb-cyan);
  font-family: var(--gb-font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}
.sp-manage-btn:hover {
  background: rgba(6, 182, 212, 0.2);
  border-color: var(--gb-cyan);
}

/* =============================================
   PROFILE PAGE STYLES
   ============================================= */
.pp-hero-card {
  margin-bottom: 16px;
  padding: 20px;
}
.pp-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gb-cyan), var(--gb-violet));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  font-family: var(--gb-font-display);
  box-shadow: 0 0 20px var(--gb-cyan-glow);
  flex-shrink: 0;
}
.pp-username {
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 1px;
}
.pp-member-since {
  font-size: 10px;
  color: var(--gb-text-muted);
  margin-top: 2px;
  font-family: var(--gb-font-display);
  letter-spacing: 1px;
}
.pp-tier-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gb-gold), var(--gb-amber));
  color: #000;
  font-size: 9px;
  font-weight: 900;
  font-family: var(--gb-font-display);
  letter-spacing: 1px;
}
.pp-stats-grid {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.pp-stat-card {
  flex: 1;
  text-align: center;
  padding: 12px;
}
.pp-stat-value {
  font-size: 20px;
  font-family: var(--gb-font-display);
  font-weight: 900;
}
.pp-stat-label {
  font-size: 8px;
  color: var(--gb-text-muted);
  margin-top: 4px;
  font-family: var(--gb-font-display);
  letter-spacing: 1px;
}
.pp-settings-item {
  margin-bottom: 6px;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.pp-settings-item:hover {
  border-color: rgba(6, 182, 212, 0.3);
}
.pp-settings-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}
.pp-settings-label {
  font-size: 13px;
  font-weight: 600;
}
.pp-settings-desc {
  font-size: 10px;
  color: var(--gb-text-muted);
}
.pp-settings-arrow {
  color: var(--gb-text-muted);
  font-size: 14px;
}

/* =============================================
   GoldenBall Slots
   ============================================= */
.slot-machine {
  text-align: center;
  margin: 12px 0;
}
.slot-frame {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 16px;
  border: 2px solid rgba(250, 204, 21, 0.3);
  position: relative;
}
.slot-reel {
  width: 80px;
  height: 80px;
  background: linear-gradient(
    180deg,
    rgba(30, 20, 50, 0.9),
    rgba(15, 10, 30, 0.95)
  );
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.slot-spinning {
  animation: slot-spin-reel 0.15s linear infinite;
}
@keyframes slot-spin-reel {
  0% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(-3px);
  }
}
.slot-symbol {
  font-size: 36px;
}
.slot-line-flash {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #fbbf24, transparent);
  animation: slot-flash 0.3s ease-in-out infinite;
}
@keyframes slot-flash {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
.slot-result {
  text-align: center;
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 16px;
  padding: 10px;
  border-radius: 10px;
  margin: 8px 0;
}
.slot-win {
  color: #fbbf24;
  background: rgba(250, 204, 21, 0.1);
  text-shadow: 0 0 15px rgba(250, 204, 21, 0.5);
}
.slot-lose {
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.03);
}
.slot-controls {
  text-align: center;
}
.slot-spin-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 50%, #4c1d95 100%);
  border: none;
  color: #fff;
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
  transition: all 0.2s;
}
.slot-spin-btn:hover {
  transform: translateY(-2px);
}

/* =============================================
   GoldenBall Mine
   ============================================= */
.mine-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 300px;
  margin: 8px auto;
}
.mine-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(
    145deg,
    rgba(30, 20, 50, 0.9),
    rgba(15, 10, 30, 0.95)
  );
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: rgba(255, 255, 255, 0.3);
}
.mine-hidden:hover {
  border-color: rgba(139, 92, 246, 0.4);
  transform: scale(1.05);
}
.mine-safe {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
}
.mine-bomb {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  animation: mine-shake 0.3s ease;
}
@keyframes mine-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
.mine-mult {
  text-align: center;
  margin: 8px 0;
}
.mine-mult__value {
  font-family: var(--gb-font-display);
  font-size: 28px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 20px rgba(250, 204, 21, 0.4);
}
.mine-mult__sub {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--gb-font-display);
}
.mine-controls {
  text-align: center;
  margin-top: 8px;
}
.mine-result-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  backdrop-filter: blur(8px);
  animation: result-fade 0.3s ease;
}
.mine-exploded-overlay {
  background: rgba(40, 0, 0, 0.85);
}
.mine-won-overlay {
  background: rgba(0, 0, 0, 0.85);
}
.mine-result-title {
  font-family: var(--gb-font-display);
  font-size: 36px;
  font-weight: 900;
  color: #ef4444;
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}
.mine-won-title {
  color: #fbbf24 !important;
  text-shadow: 0 0 20px rgba(250, 204, 21, 0.5) !important;
}
.mine-result-amount {
  font-family: var(--gb-font-display);
  font-size: 18px;
  font-weight: 700;
  color: #22c55e;
}

/* =============================================
   GoldenBall High-Low
   ============================================= */
.hl-cards {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
  align-items: center;
}
.hl-card {
  width: 90px;
  height: 130px;
  border-radius: 12px;
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
}
.hl-card__value {
  font-family: var(--gb-font-display);
  font-size: 32px;
  font-weight: 900;
}
.hl-card__suit {
  font-size: 24px;
}
.hl-red {
  color: #ef4444;
}
.hl-black {
  color: #e2e8f0;
}
.hl-hidden {
  background: linear-gradient(145deg, #4c1d95, #6d28d9);
  border-color: rgba(139, 92, 246, 0.4);
}
.hl-card__back {
  font-size: 36px;
  color: rgba(255, 255, 255, 0.3);
}
.hl-streak {
  text-align: center;
  font-family: var(--gb-font-display);
  font-size: 14px;
  font-weight: 900;
  color: #fbbf24;
  padding: 6px;
  letter-spacing: 1px;
}
.hl-controls {
  text-align: center;
}
.hl-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.hl-btn {
  flex: 1;
  padding: 14px;
  border-radius: 10px;
  font-family: var(--gb-font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}
.hl-high {
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  box-shadow: 0 0 15px rgba(5, 150, 105, 0.3);
}
.hl-low {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.3);
}
.hl-btn:hover {
  transform: scale(1.02);
}

/* =============================================
   GoldenBall Dice
   ============================================= */
.dice-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
}
.dice-face {
  font-size: 56px;
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.4));
  transition: transform 0.1s;
}
.dice-rolling {
  animation: dice-roll 0.1s linear infinite;
}
@keyframes dice-roll {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(90deg) scale(1.1);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  75% {
    transform: rotate(270deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
.dice-total {
  font-family: var(--gb-font-display);
  font-size: 28px;
  font-weight: 900;
  color: #fbbf24;
}
.dice-target {
  text-align: center;
  margin: 8px 0;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--gb-font-display);
  font-size: 13px;
  font-weight: 700;
}
.dice-slider {
  width: 90%;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #dc2626, #6366f1, #059669);
  outline: none;
  margin: 8px 0;
}
.dice-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fbbf24;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
}
.dice-range {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  padding: 0 5%;
}
.dice-bet-types {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}
.dice-bet-btn {
  flex: 1;
  padding: 10px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--gb-font-display);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.dice-exact {
  border-color: rgba(250, 204, 21, 0.2);
}
.dice-bet-active {
  background: rgba(139, 92, 246, 0.15);
  border-color: var(--gb-violet);
  color: #fff;
  box-shadow: 0 0 10px var(--gb-violet-glow);
}
.dice-controls {
  text-align: center;
}

/* =============================================
   MICRO-ANIMATIONS & POLISH (v8 Premium)
   ============================================= */

/* 카드/섹션 등장 페이드인 슬라이드업 */
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.activity-card {
  animation: card-enter 0.4s ease-out both;
}
.activity-card:nth-child(1) {
  animation-delay: 0s;
}
.activity-card:nth-child(2) {
  animation-delay: 0.06s;
}
.activity-card:nth-child(3) {
  animation-delay: 0.12s;
}
.activity-card:nth-child(4) {
  animation-delay: 0.18s;
}

.live-stats-bar {
  animation: card-enter 0.5s ease-out 0.1s both;
}

/* 퀵 액션 버튼 호버 쉬머 (빛줄기 스윕) */
.quick-action-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent
  );
  transition: left 0.5s ease;
  pointer-events: none;
}
.quick-action-btn:hover::after {
  left: 120%;
}

/* 퀵 액션 active(클릭) 효과 */
.quick-action-btn:active {
  transform: scale(0.96);
}

/* 네비 활성 탭 글로우 확장 */
.nav-item.active {
  text-shadow: 0 0 12px var(--gb-cyan-glow);
}
.nav-item.active svg {
  filter: drop-shadow(0 0 8px var(--gb-cyan-glow));
}

/* 가격 변동 플래시 */
@keyframes price-flash-up {
  0% {
    color: inherit;
  }
  20% {
    color: #4ade80;
    text-shadow: 0 0 16px rgba(74, 222, 128, 0.6);
  }
  100% {
    color: inherit;
    text-shadow: none;
  }
}
@keyframes price-flash-down {
  0% {
    color: inherit;
  }
  20% {
    color: #f87171;
    text-shadow: 0 0 16px rgba(248, 113, 113, 0.6);
  }
  100% {
    color: inherit;
    text-shadow: none;
  }
}
.price-up {
  animation: price-flash-up 0.8s ease-out;
}
.price-down {
  animation: price-flash-down 0.8s ease-out;
}

/* GoldenBall Index 히어로 입장 */
.gb-index-hero {
  animation: card-enter 0.6s ease-out both;
}

/* 차트 섹션 입장 */
.gb-chart-section {
  animation: card-enter 0.5s ease-out 0.05s both;
}

/* 베팅 버튼 펄스 (idle 상태 어텐션) */
@keyframes btn-pulse {
  0%,
  100% {
    box-shadow:
      0 6px 24px rgba(185, 28, 28, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  50% {
    box-shadow:
      0 6px 32px rgba(185, 28, 28, 0.6),
      0 0 20px rgba(239, 68, 68, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}
@keyframes btn-pulse-long {
  0%,
  100% {
    box-shadow:
      0 6px 24px rgba(22, 163, 74, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  50% {
    box-shadow:
      0 6px 32px rgba(22, 163, 74, 0.6),
      0 0 20px rgba(34, 197, 94, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}
.bp-act--short:not(:disabled) {
  animation: btn-pulse 2.5s ease-in-out infinite;
}
.bp-act--long:not(:disabled) {
  animation: btn-pulse-long 2.5s ease-in-out infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ===== PWA 캐시 다운로드 팝업 ===== */
.cache-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  animation: celebration-enter 0.3s ease-out;
}
.cache-loader__card {
  text-align: center;
  background: rgba(10, 8, 20, 0.9);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 20px;
  padding: 32px 40px;
  min-width: 280px;
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.15);
}
.cache-loader__icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.cache-loader__title {
  font-family: var(--gb-font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 6px;
  color: #a78bfa;
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
  margin-bottom: 20px;
}
.cache-loader__bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.cache-loader__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #a78bfa, #c4b5fd);
  border-radius: 3px;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.6);
}
.cache-loader__pct {
  font-family: var(--gb-font-display);
  font-size: 28px;
  font-weight: 900;
  color: #c4b5fd;
  margin-bottom: 4px;
}
.cache-loader__status {
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
}
/* 업데이팅 화면(디자인 시안 1/3/4)을 iframe으로 격리 표시 */
.cache-loader-frame {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 9999;
  background: #000;
}

/* =============================================
   SOUND CONTROL
   ============================================= */
.sound-ctrl {
  position: relative;
  display: flex;
  align-items: center;
}
.sound-ctrl__btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.4);
  background: rgba(10, 8, 20, 0.85);
  backdrop-filter: blur(10px);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
  transition: all 0.2s;
}
.sound-ctrl__btn:hover {
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.4);
  border-color: rgba(139, 92, 246, 0.6);
}
.sound-ctrl__btn--off {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.15);
}
.sound-ctrl__panel {
  position: absolute;
  top: 48px;
  right: 0;
  background: rgba(10, 8, 20, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 14px;
  padding: 6px;
  min-width: 130px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: sound-panel-in 0.2s ease-out;
}
@keyframes sound-panel-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.sound-ctrl__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #c4b5fd;
  font-family: var(--gb-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s;
}
.sound-ctrl__row:hover {
  background: rgba(139, 92, 246, 0.12);
}
.sound-ctrl__row.off {
  color: rgba(255, 255, 255, 0.3);
}
.sound-ctrl__icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   GoldenBall Powerball 스타일
   ═══════════════════════════════════════════════════════ */
.powerball-page {
  padding: 16px;
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 100px;
}

/* ════════════════════════════════════════════
   NEW POWERBALL PAGE — 한 화면 통합 레이아웃
   ════════════════════════════════════════════ */
.pb-page {
  max-width: 480px;
  margin: 0 auto;
  /* [적대검증 반영] 하단네비는 .app-viewport 밖(overlay 아님) — 88px는 죽은 공간이었음.
     실 뷰포트 = 100dvh - 헤더52 - 네비64 = (812기기 기준) 696px 예산으로 재설계 */
  /* [2026-07-09] BET HISTORY 짤림 수정: 베팅 중 fixed .pb-cartbar(약 60px)가 하단을
     덮어 히스토리 마지막 줄이 가려짐 → 하단 여백 확보로 전체 스크롤 노출 */
  padding: 0 12px 84px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.pb-sticky-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(5, 5, 8, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 0 -12px;
  padding: 4px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pb-scroll-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════
   Hero 카드 캐러셀 — 28개 PNG cross-fade + 동적 오버레이
   ═══════════════════════════════════════════════════════ */
.pb-hero {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  background: #0a0a14;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  isolation: isolate;
}
.pb-hero--result   { box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(16,185,129,0.4), 0 0 28px rgba(16,185,129,0.25); }
.pb-hero--settling { box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(245,158,11,0.5), 0 0 32px rgba(245,158,11,0.3); }
.pb-hero--betting  { box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(124,58,237,0.4), 0 0 24px rgba(124,58,237,0.25); }

.pb-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pb-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out, transform 4s ease-out;
  pointer-events: none;
  user-select: none;
  transform: scale(1.08);
}
.pb-hero-img--active {
  opacity: 0.7;
  transform: scale(1);
}
.pb-hero-bg--fast .pb-hero-img {
  transition: opacity 0.2s linear;
}
.pb-hero-bg--fast .pb-hero-img--active {
  opacity: 0.85;
}
.pb-hero-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,8,0.35) 0%, rgba(5,5,8,0.2) 40%, rgba(5,5,8,0.85) 100%),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
  z-index: 1;
}

/* 오버레이 콘텐츠 */
.pb-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 12px;
}
.pb-hero-tag {
  font-family: var(--gb-font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
}
.pb-hero-tag--result  { color: #6ee7b7; background: rgba(16,185,129,0.2); }
.pb-hero-tag--drawing { color: #fcd34d; background: rgba(245,158,11,0.22); animation: pb-blink 0.6s infinite; }
.pb-hero-tag--urgent  { color: #fca5a5; background: rgba(239,68,68,0.25); animation: pb-blink 0.5s infinite; }

.pb-hero-number {
  font-family: var(--gb-font-display);
  font-size: 88px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  color: #fff;
  text-shadow:
    0 4px 16px rgba(0,0,0,0.9),
    0 0 24px rgba(168,85,247,0.5),
    0 0 48px rgba(168,85,247,0.25);
  margin: 2px 0;
  transition: color 0.2s linear, text-shadow 0.2s linear;
}
.pb-hero-number--idle  { font-size: 44px; letter-spacing: 0; color: #e0e7ff; text-shadow: 0 4px 14px rgba(0,0,0,0.9), 0 0 20px rgba(167,139,250,0.45); }
.pb-hero-number--low   { color: #93c5fd; text-shadow: 0 4px 16px rgba(0,0,0,0.9), 0 0 28px rgba(59,130,246,0.7);  }
.pb-hero-number--mid   { color: #d8b4fe; text-shadow: 0 4px 16px rgba(0,0,0,0.9), 0 0 28px rgba(168,85,247,0.75); }
.pb-hero-number--high  { color: #fcd34d; text-shadow: 0 4px 16px rgba(0,0,0,0.9), 0 0 28px rgba(245,158,11,0.75); }
.pb-hero-number--ultra { color: #fca5a5; text-shadow: 0 4px 16px rgba(0,0,0,0.9), 0 0 32px rgba(239,68,68,0.85);  }
.pb-hero-number--urgent { color: #fca5a5; animation: pb-blink 0.5s infinite; }
.pb-hero-number--pop {
  animation: pb-hero-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pb-hero-pop {
  0%   { transform: scale(0.3); opacity: 0; filter: blur(8px); }
  55%  { transform: scale(1.22); opacity: 1; filter: blur(0); }
  75%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

.pb-hero-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.65);
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* main-row 단순화 — ball-col 제거 모드 */
.pb-main-row--no-ball {
  display: block;
}
.pb-right-col--full {
  width: 100%;
}
.pb-main-row--no-ball .pb-recent-row {
  justify-content: center; /* [2026-07-09 #11] 최근 결과 10개 가운데 정렬 */
  gap: 6px;
}
.pb-main-row--no-ball .pb-mini-ball {
  width: 26px;
  height: 26px;
  font-size: 10px;
  /* 늦은 중복 정의(.pb-mini-ball inline-block/line-height:32px)가 이겨 숫자가 3px 내려앉음 → flex 중앙 강제 */
  display: flex;
  line-height: 26px;
}

/* ═══════════════════════════════════════════════════════
   P2: 메가 볼 — 8가지 스킨 + 안에서 숫자 빠르게 움직임
   ═══════════════════════════════════════════════════════ */
.pb-ball-mega-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 0 4px;
}
.pb-ball-mega-label {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.78);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  padding: 5px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
}
.pb-ball-mega-label--result   { color: #6ee7b7; background: rgba(16,185,129,0.22); border-color: rgba(16,185,129,0.4); }
.pb-ball-mega-label--settling { color: #fcd34d; background: rgba(245,158,11,0.22); border-color: rgba(245,158,11,0.4); animation: pb-blink 0.6s infinite; }
.pb-ball-mega-label.is-urgent { color: #fca5a5; background: rgba(239,68,68,0.28); border-color: rgba(239,68,68,0.5); animation: pb-blink 0.5s infinite; }

/* [2026-07-06 한화면] 240px 볼이 마켓/히스토리를 화면 밖으로 밀어냄 → 120px 축소
   (실 뷰포트 696px에서 활성상태(온체인행+베팅행 포함)까지 무스크롤 목표) */
.pb-ball-mega {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: filter 0.3s, box-shadow 0.4s;
}

/* 8가지 스킨 (radial-gradient + box-shadow + inset shadow로 입체감) */
.pb-ball-skin-0 {  /* 0: 보라/핑크 */
  background: radial-gradient(circle at 32% 28%, #fbcfe8 0%, #f472b6 18%, #c026d3 45%, #7e22ce 75%, #3b0764 100%);
  box-shadow: 0 0 60px rgba(168,85,247,0.55), 0 0 110px rgba(236,72,153,0.3), inset -28px -28px 50px rgba(0,0,0,0.35), inset 12px 12px 30px rgba(255,255,255,0.1);
}
.pb-ball-skin-1 {  /* 1: 시안/파랑 */
  background: radial-gradient(circle at 32% 28%, #cffafe 0%, #67e8f9 18%, #06b6d4 45%, #1d4ed8 75%, #0c1e63 100%);
  box-shadow: 0 0 60px rgba(6,182,212,0.55), 0 0 110px rgba(59,130,246,0.3), inset -28px -28px 50px rgba(0,0,0,0.35), inset 12px 12px 30px rgba(255,255,255,0.1);
}
.pb-ball-skin-2 {  /* 2: 주황/빨강 */
  background: radial-gradient(circle at 32% 28%, #fed7aa 0%, #fb923c 18%, #ea580c 45%, #b91c1c 75%, #4c0519 100%);
  box-shadow: 0 0 60px rgba(251,146,60,0.55), 0 0 110px rgba(239,68,68,0.35), inset -28px -28px 50px rgba(0,0,0,0.35), inset 12px 12px 30px rgba(255,255,255,0.1);
}
.pb-ball-skin-3 {  /* 3: 초록/라임 */
  background: radial-gradient(circle at 32% 28%, #d9f99d 0%, #84cc16 18%, #16a34a 45%, #14532d 75%, #022c0a 100%);
  box-shadow: 0 0 60px rgba(34,197,94,0.55), 0 0 110px rgba(132,204,22,0.3), inset -28px -28px 50px rgba(0,0,0,0.35), inset 12px 12px 30px rgba(255,255,255,0.1);
}
.pb-ball-skin-4 {  /* 4: 골드/앰버 */
  background: radial-gradient(circle at 32% 28%, #fef9c3 0%, #fde047 18%, #ca8a04 45%, #713f12 80%, #1c0d00 100%);
  box-shadow: 0 0 60px rgba(251,191,36,0.65), 0 0 110px rgba(245,158,11,0.4), inset -28px -28px 50px rgba(0,0,0,0.35), inset 12px 12px 30px rgba(255,255,255,0.15);
}
.pb-ball-skin-5 {  /* 5: 무지개 회전 */
  background: conic-gradient(from 0deg, #f87171, #fcd34d, #4ade80, #06b6d4, #818cf8, #c084fc, #f87171);
  animation: pb-rainbow-spin 4s linear infinite;
  box-shadow: 0 0 80px rgba(255,255,255,0.45), inset -28px -28px 60px rgba(0,0,0,0.5);
}
@keyframes pb-rainbow-spin { to { transform: rotate(360deg); } }
.pb-ball-skin-6 {  /* 6: 다이아 크리스탈 */
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.98) 0%, rgba(186,230,253,0.85) 22%, rgba(129,140,248,0.7) 55%, rgba(67,56,202,0.85) 100%);
  box-shadow: 0 0 80px rgba(165,180,252,0.85), inset -28px -28px 50px rgba(0,0,0,0.18), inset 22px 22px 50px rgba(255,255,255,0.4);
}
.pb-ball-skin-7 {  /* 7: 네온 사이버 */
  background: radial-gradient(circle at 50% 50%, #052e16 0%, #064e3b 30%, #0a0a14 75%);
  border: 2px solid #4ade80;
  box-shadow: 0 0 50px #22c55e, 0 0 110px rgba(34,197,94,0.45), inset 0 0 50px rgba(34,197,94,0.45);
}

/* 결과 발표 시 스킨 — bbNumber 색깔 고정 */
.pb-ball-skin-result-low   { background: radial-gradient(circle at 32% 28%, #cffafe 0%, #67e8f9 20%, #06b6d4 55%, #1e3a8a 100%); box-shadow: 0 0 80px rgba(6,182,212,0.7), 0 0 140px rgba(59,130,246,0.4), inset -28px -28px 50px rgba(0,0,0,0.35); }
.pb-ball-skin-result-mid   { background: radial-gradient(circle at 32% 28%, #fbcfe8 0%, #d8b4fe 20%, #a855f7 55%, #4c1d95 100%); box-shadow: 0 0 80px rgba(168,85,247,0.7), 0 0 140px rgba(236,72,153,0.4), inset -28px -28px 50px rgba(0,0,0,0.35); }
.pb-ball-skin-result-high  { background: radial-gradient(circle at 32% 28%, #fef3c7 0%, #fcd34d 20%, #d97706 55%, #78350f 100%); box-shadow: 0 0 80px rgba(251,191,36,0.7), 0 0 140px rgba(245,158,11,0.4), inset -28px -28px 50px rgba(0,0,0,0.35); }
.pb-ball-skin-result-ultra { background: radial-gradient(circle at 32% 28%, #fecaca 0%, #f87171 20%, #dc2626 55%, #450a0a 100%); box-shadow: 0 0 80px rgba(239,68,68,0.85), 0 0 160px rgba(220,38,38,0.5), inset -28px -28px 50px rgba(0,0,0,0.35); }

/* [2026-07-09 #1] 결과볼 색 — 홀(odd)=빨강, 짝(even)=파랑 */
/* [2026-07-09 #1-8] 홀=파랑 / 짝=빨강 (기존 홀짝 익숙함) */
.pb-ball-skin-parity-odd  { background: radial-gradient(circle at 32% 28%, #bfdbfe 0%, #60a5fa 20%, #2563eb 55%, #1e3a8a 100%); box-shadow: 0 0 80px rgba(59,130,246,0.8), 0 0 150px rgba(37,99,235,0.45), inset -28px -28px 50px rgba(0,0,0,0.35); }
.pb-ball-skin-parity-even { background: radial-gradient(circle at 32% 28%, #fecaca 0%, #f87171 20%, #dc2626 55%, #7f1d1d 100%); box-shadow: 0 0 80px rgba(239,68,68,0.8), 0 0 150px rgba(220,38,38,0.45), inset -28px -28px 50px rgba(0,0,0,0.35); }

/* 오버(▲)/언더(▼) 기호 배지 — 결과 메가볼 우상단(스테이지 기준, 볼 밖) */
.pb-ball-ou {
  position: absolute; top: -2px; right: -2px; z-index: 6;
  min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; line-height: 1;
  background: rgba(10,12,18,0.82);
  border: 1.5px solid rgba(255,255,255,0.18);
  box-shadow: 0 3px 10px rgba(0,0,0,0.55);
}
.pb-ball-ou--over  { color: #4ade80; }
.pb-ball-ou--under { color: #93c5fd; }

/* 결과볼 색/기호 범례 */
.pb-ball-legend {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin: 3px 0 0; font-size: 10px; font-weight: 700;
}
.pb-lg { display: inline-flex; align-items: center; gap: 2px; letter-spacing: 0.3px; }
.pb-lg--odd  { color: #60a5fa; }
.pb-lg--even { color: #f87171; }
.pb-lg--over { color: #4ade80; }
.pb-lg--under{ color: #93c5fd; }

/* 좌상단 빛 반사 highlight */
.pb-ball-mega-highlight {
  position: absolute;
  top: 8%;
  left: 16%;
  width: 32%;
  height: 24%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  filter: blur(4px);
  pointer-events: none;
  z-index: 3;
}

/* 회전하는 shine */
.pb-ball-mega-shine {
  position: absolute;
  inset: -15%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.18) 22%, transparent 45%, rgba(255,255,255,0.08) 70%, transparent 100%);
  animation: pb-ball-shine 7s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.pb-ball-skin-5 .pb-ball-mega-shine { display: none; }
.pb-ball-skin-7 .pb-ball-mega-shine { animation-duration: 3s; opacity: 0.5; }
@keyframes pb-ball-shine { to { transform: rotate(360deg); } }

/* 큰 숫자 */
.pb-ball-mega-num {
  font-family: var(--gb-font-display);
  font-size: 52px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -2px;
  text-shadow:
    0 4px 18px rgba(0,0,0,0.8),
    0 0 28px rgba(255,255,255,0.4),
    0 0 56px rgba(255,255,255,0.15);
  z-index: 4;
  user-select: none;
}

/* settling — 빠른 흔들림 */
/* [2026-07-07] 뽑기(settling) 10초 = 지랄발광 집중: 흔들림 + 강한 광원 펄스 */
.pb-ball-mega.is-drawing {
  animation: pb-ball-shake-mega 0.16s infinite, pb-ball-draw-glow 0.5s ease-in-out infinite;
}
@keyframes pb-ball-shake-mega {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3px, 2px) scale(1.03); }
  50%  { transform: translate(3px, -2px) scale(1.06); }
  75%  { transform: translate(-2px, 3px) scale(1.03); }
  100% { transform: translate(0, 0); }
}
@keyframes pb-ball-draw-glow {
  0%, 100% { box-shadow: 0 0 36px rgba(168,85,247,0.6), inset -28px -28px 50px rgba(0,0,0,0.35); }
  50%       { box-shadow: 0 0 96px rgba(168,85,247,1), 0 0 150px rgba(59,130,246,0.6), inset -28px -28px 50px rgba(0,0,0,0.35); }
}

/* ─── 복권 드럼 연출 (settling ~11s) — 여러 공이 궤도를 돈다 (2026-07-09) ─── */
.pb-ball-mega-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb-lotto {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  z-index: 5;
  pointer-events: none;
}
/* 회전하는 드럼 링 */
.pb-lotto::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 176px; height: 176px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.16);
  box-shadow: 0 0 44px rgba(168,85,247,0.4), inset 0 0 44px rgba(168,85,247,0.22);
  animation: pb-lotto-drum 3s linear infinite;
}
@keyframes pb-lotto-drum { to { transform: translate(-50%, -50%) rotate(360deg); } }

.pb-lotto-spin {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  animation-name: pb-lotto-orbit;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pb-lotto-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.pb-lotto-ball {
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  transform: translate(-50%, -50%) translateY(calc(-1 * var(--r, 56px)));
  box-shadow:
    inset -4px -4px 7px rgba(0,0,0,0.4),
    inset 3px 3px 6px rgba(255,255,255,0.55),
    0 2px 6px rgba(0,0,0,0.5);
}

@media (max-width: 480px) {
  .pb-lotto { transform: scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
  .pb-lotto-spin, .pb-lotto::before { animation: none; }
}

/* result — POP 등장 */
.pb-ball-mega.is-pop {
  animation: pb-ball-pop-mega 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pb-ball-pop-mega {
  0%   { transform: scale(0.35); opacity: 0.3; filter: blur(6px); }
  60%  { transform: scale(1.18); opacity: 1; filter: blur(0); }
  100% { transform: scale(1); }
}

/* urgent — 5초 이하 빨간 펄스 */
.pb-ball-mega.is-urgent {
  animation: pb-ball-urgent-mega 0.55s ease-in-out infinite !important;
  outline: 3px solid #ef4444;
  outline-offset: 4px;
}
@keyframes pb-ball-urgent-mega {
  0%, 100% { box-shadow: 0 0 30px rgba(239,68,68,0.5), inset -28px -28px 50px rgba(0,0,0,0.35); }
  50%       { box-shadow: 0 0 90px rgba(239,68,68,1), 0 0 160px rgba(239,68,68,0.4), inset -28px -28px 50px rgba(0,0,0,0.35); }
}

/* sub 라벨 — GoldenBall Index + Round# */
.pb-ball-mega-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.55);
  text-align: center;
}
.pb-ball-mega-sub b {
  color: #c4b5fd;
  font-weight: 800;
  font-family: var(--gb-font-display);
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════
   P3: 슬롯머신 스타일 (2 reel × 한 자리)
   ═══════════════════════════════════════════════════════ */
.pb-slot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 0 10px;
}
.pb-slot-label {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,0.78);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  padding: 5px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
}
.pb-slot-label--result   { color: #6ee7b7; background: rgba(16,185,129,0.22); border-color: rgba(16,185,129,0.4); }
.pb-slot-label--settling { color: #fcd34d; background: rgba(245,158,11,0.22); border-color: rgba(245,158,11,0.4); animation: pb-blink 0.5s infinite; }
.pb-slot-label.is-urgent { color: #fca5a5; background: rgba(239,68,68,0.28); border-color: rgba(239,68,68,0.5); animation: pb-blink 0.5s infinite; }

.pb-slot-reels {
  display: flex;
  gap: 14px;
  padding: 12px;
  background: linear-gradient(180deg, #0a0a14 0%, #1a0a2e 50%, #0a0a14 100%);
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.5);
  position: relative;
}
.pb-slot-reels::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.08);
  pointer-events: none;
}

.pb-slot-reel {
  width: 110px;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  border: 2px solid rgba(255,255,255,0.15);
  transition: background 0.4s, box-shadow 0.4s;
}
.pb-slot-reel.is-stopped {
  border-color: rgba(34, 197, 94, 0.8);
}

.pb-slot-strip {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 1100%;  /* 11개 digit (0~9 + 0) */
  animation: pb-slot-spin linear infinite;
}
@keyframes pb-slot-spin {
  0%   { transform: translateY(0%); }
  100% { transform: translateY(-90.909%); } /* 10 digit 분 (11분의 10) */
}

.pb-slot-digit {
  flex: 0 0 9.0909%;  /* 1/11 — 11개 디지트 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gb-font-display);
  font-size: 130px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow:
    0 4px 16px rgba(0,0,0,0.8),
    0 0 24px rgba(255,255,255,0.5),
    0 0 48px rgba(255,255,255,0.2);
  user-select: none;
}

/* 위/아래 fade overlay (3D 깊이감) */
.pb-slot-fade-top, .pb-slot-fade-bot {
  position: absolute;
  left: 0;
  right: 0;
  height: 30%;
  pointer-events: none;
  z-index: 2;
}
.pb-slot-fade-top {
  top: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
}
.pb-slot-fade-bot {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
}

/* result 시 중앙 highlight 라인 (멈춘 자리 강조) */
.pb-slot-reels::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.6), transparent);
  transform: translateY(-1px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 3;
}
.pb-slot-wrap:has(.pb-slot-label--result)::before {
  /* fallback — :has 미지원 환경에선 무효 */
}

.pb-slot-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.55);
  text-align: center;
}
.pb-slot-sub b {
  color: #c4b5fd;
  font-weight: 800;
  font-family: var(--gb-font-display);
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════
   P4: LED 사이버펑크 디스플레이
   ═══════════════════════════════════════════════════════ */
.pb-led-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 0 10px;
}
.pb-led-label {
  font-family: "Orbitron", var(--gb-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  color: #4ade80;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(74, 222, 128, 0.4);
  padding: 5px 14px;
  border-radius: 4px;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
}
.pb-led-label--result   { color: #4ade80; border-color: rgba(74,222,128,0.6); text-shadow: 0 0 12px #4ade80; }
.pb-led-label--settling { color: #fbbf24; border-color: rgba(251,191,36,0.6); text-shadow: 0 0 12px #fbbf24; animation: pb-blink 0.5s infinite; }
.pb-led-label.is-urgent { color: #f87171; border-color: rgba(248,113,113,0.7); text-shadow: 0 0 14px #f87171; animation: pb-blink 0.4s infinite; }

/* 메인 LED 프레임 */
.pb-led-frame {
  position: relative;
  width: 300px;
  height: 200px;
  background: #000;
  border: 2px solid #0ea5e9;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow:
    0 0 30px rgba(14, 165, 233, 0.5),
    0 0 80px rgba(14, 165, 233, 0.2),
    inset 0 0 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition: border-color 0.4s, box-shadow 0.4s;
}

/* 색깔 톤 */
.pb-led-tone-cyan   { border-color: #0ea5e9; box-shadow: 0 0 30px rgba(14,165,233,0.55), 0 0 80px rgba(14,165,233,0.22), inset 0 0 40px rgba(0,0,0,0.6); }
.pb-led-tone-cyan   .pb-led-num { color: #67e8f9; text-shadow: 0 0 8px #06b6d4, 0 0 24px #0ea5e9, 0 0 48px #0284c7; }
.pb-led-tone-purple { border-color: #a855f7; box-shadow: 0 0 30px rgba(168,85,247,0.55), 0 0 80px rgba(168,85,247,0.22), inset 0 0 40px rgba(0,0,0,0.6); }
.pb-led-tone-purple .pb-led-num { color: #d8b4fe; text-shadow: 0 0 8px #a855f7, 0 0 24px #9333ea, 0 0 48px #7e22ce; }
.pb-led-tone-amber  { border-color: #f59e0b; box-shadow: 0 0 30px rgba(245,158,11,0.55), 0 0 80px rgba(245,158,11,0.22), inset 0 0 40px rgba(0,0,0,0.6); }
.pb-led-tone-amber  .pb-led-num { color: #fcd34d; text-shadow: 0 0 8px #f59e0b, 0 0 24px #d97706, 0 0 48px #b45309; }
.pb-led-tone-red    { border-color: #ef4444; box-shadow: 0 0 30px rgba(239,68,68,0.6), 0 0 80px rgba(239,68,68,0.28), inset 0 0 40px rgba(0,0,0,0.6); }
.pb-led-tone-red    .pb-led-num { color: #fca5a5; text-shadow: 0 0 8px #ef4444, 0 0 24px #dc2626, 0 0 48px #991b1b; }

/* 큰 LED 숫자 */
.pb-led-num {
  font-family: "Orbitron", monospace;
  font-size: 130px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 8px;
  z-index: 3;
  user-select: none;
}
.pb-led-phase-settling .pb-led-num { animation: pb-led-flicker 0.18s infinite; }
.pb-led-phase-result   .pb-led-num { animation: pb-led-lock 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pb-led-flicker {
  0%, 100% { opacity: 1; }
  20%      { opacity: 0.6; }
  40%      { opacity: 0.95; }
  60%      { opacity: 0.7; }
  80%      { opacity: 1; }
}
@keyframes pb-led-lock {
  0%   { transform: scale(0.5); opacity: 0; filter: blur(8px); }
  60%  { transform: scale(1.15); opacity: 1; filter: blur(0); }
  100% { transform: scale(1); }
}

/* Bracket [ ] — result 시만 슬라이드 인 */
.pb-led-bracket {
  font-family: "Orbitron", monospace;
  font-size: 110px;
  font-weight: 900;
  color: currentColor;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
}
.pb-led-bracket--l { color: inherit; }
.pb-led-bracket--r { color: inherit; }
.pb-led-bracket.is-visible { opacity: 0.85; }
.pb-led-bracket--l.is-visible { transform: translateX(-8px); }
.pb-led-bracket--r.is-visible { transform: translateX(8px); }

/* 그리드 배경 */
.pb-led-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14, 165, 233, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 1;
}

/* 스캔라인 (위→아래 이동) */
.pb-led-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.7), transparent);
  animation: pb-led-scan 3s linear infinite;
  pointer-events: none;
  z-index: 2;
  filter: blur(1px);
}
@keyframes pb-led-scan {
  0%   { top: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* 회전 네온 링 (frame 바깥) */
.pb-led-ring {
  position: absolute;
  inset: -6px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  animation: pb-led-ring-rotate 8s linear infinite;
  pointer-events: none;
}
@keyframes pb-led-ring-rotate {
  to { transform: rotate(0.5deg); }
}

/* 4 모서리 락온 표식 */
.pb-led-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: currentColor;
  border-style: solid;
  pointer-events: none;
  z-index: 3;
}
.pb-led-corner--tl { top: 6px;    left: 6px;    border-width: 2px 0 0 2px; }
.pb-led-corner--tr { top: 6px;    right: 6px;   border-width: 2px 2px 0 0; }
.pb-led-corner--bl { bottom: 6px; left: 6px;    border-width: 0 0 2px 2px; }
.pb-led-corner--br { bottom: 6px; right: 6px;   border-width: 0 2px 2px 0; }
.pb-led-tone-cyan   .pb-led-corner { color: #67e8f9; }
.pb-led-tone-purple .pb-led-corner { color: #d8b4fe; }
.pb-led-tone-amber  .pb-led-corner { color: #fcd34d; }
.pb-led-tone-red    .pb-led-corner { color: #fca5a5; }

/* 하단 상태 라인 */
.pb-led-sub {
  font-family: "Orbitron", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pb-led-tag {
  color: #475569;
  font-weight: 500;
}
.pb-led-sub b {
  color: #67e8f9;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(14, 165, 233, 0.6);
}
.pb-led-sep {
  color: #334155;
}

/* ── Toast ── */
.pb-toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  z-index: 999;
  white-space: nowrap;
  animation: toast-in 0.3s ease;
  pointer-events: none;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.pb-toast--win  { background: rgba(16,185,129,0.9); color: #fff; }
.pb-toast--lose { background: rgba(239,68,68,0.85); color: #fff; }
.pb-toast--info { background: rgba(99,102,241,0.9); color: #fff; }

/* ── Top Bar ── */
.pb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 6px;
  gap: 8px;
}
.pb-back-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #94a3b8;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.pb-back-btn:hover { background: rgba(255,255,255,0.12); }
.pb-topbar-center {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.pb-topbar-title {
  font-family: var(--gb-font-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #fff;
}
.pb-topbar-round {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 700;
  color: #a855f7;
  background: rgba(168,85,247,0.15);
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 12px;
  padding: 2px 8px;
}
.pb-topbar-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 72px;
}
.pb-topbar-bal-num {
  font-family: var(--gb-font-display);
  font-size: 15px;
  font-weight: 900;
  color: #10b981;
  line-height: 1.1;
}
.pb-topbar-bal-unit {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #6ee7b7;
}

/* ── Phase Bar ── */
.pb-phase-bar {
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.07);
}
.pb-phase-bar--betting  { background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.3); }
.pb-phase-bar--settling { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); }
.pb-phase-bar--result   { background: rgba(16,185,129,0.1);  border-color: rgba(16,185,129,0.25); }
.pb-phase-bar--idle     { background: rgba(255,255,255,0.03); }
.pb-phase-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* [2026-07-12 영업 #1-7] 배팅시간 옆 회차 크게 표시 */
.pb-phase-round {
  font-family: var(--gb-font-display);
  font-size: 15px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
}
/* ── Pending "DRAWING…" indicator (result-wait ~11s) ── */
.pb-drawing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 480px;
  margin: 6px auto 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.35);
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(245,158,11,0.5);
}
.pb-drawing-spin {
  display: inline-block;
  font-size: 13px;
  animation: pb-drawing-spin 1s linear infinite;
}
@keyframes pb-drawing-spin {
  to { transform: rotate(360deg); }
}
.pb-phase-label {
  font-family: var(--gb-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #c4b5fd;
  white-space: nowrap;
}
.pb-phase-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.pb-phase-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  border-radius: 3px;
  transition: width 0.5s linear;
}
.pb-phase-countdown {
  font-family: var(--gb-font-display);
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  min-width: 36px;
  text-align: right;
}
.pb-phase-countdown.urgent { color: #ef4444; animation: pb-blink 0.6s infinite; }
@keyframes pb-blink { 50% { opacity: 0.5; } }

/* ── Main Row (볼 + 최근결과) ── */
.pb-main-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.pb-ball-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 150px;
  position: relative;
}
.pb-bigball {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--gb-font-display);
  font-size: 56px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 0 36px rgba(168,85,247,0.45);
  transition: background 0.25s;
}
.pb-bigball--low   { background: linear-gradient(135deg,#3b82f6,#2563eb); box-shadow: 0 0 24px rgba(59,130,246,0.4); }
.pb-bigball--mid   { background: linear-gradient(135deg,#a855f7,#7c3aed); box-shadow: 0 0 24px rgba(168,85,247,0.4); }
.pb-bigball--high  { background: linear-gradient(135deg,#f59e0b,#d97706); box-shadow: 0 0 24px rgba(245,158,11,0.4); }
.pb-bigball--ultra { background: linear-gradient(135deg,#ef4444,#dc2626); box-shadow: 0 0 24px rgba(239,68,68,0.5); }
.pb-bigball--drawing {
  color: #fff;
  font-size: 56px;
  animation: pb-draw-spin 0.45s infinite, pb-draw-shake 0.15s infinite;
  transition: background 0.07s linear, box-shadow 0.07s linear;
}
@keyframes pb-draw-spin {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes pb-draw-shake {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-3px, 2px); }
  50%  { transform: translate(3px, -2px); }
  75%  { transform: translate(-2px, 3px); }
  100% { transform: translate(0,0); }
}

/* idle — 대기 중: 보라/핑크 gradient + 느린 pulse */
.pb-bigball--idle {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  animation: pb-idle-pulse 2.2s ease-in-out infinite;
}
@keyframes pb-idle-pulse {
  0%, 100% { box-shadow: 0 0 28px rgba(168,85,247,0.45); transform: scale(1); }
  50%       { box-shadow: 0 0 64px rgba(236,72,153,0.8), 0 0 100px rgba(168,85,247,0.25); transform: scale(1.04); }
}

/* result — 결과 발표: POP 등장 + glow burst */
.pb-bigball--result-pop {
  animation: pb-result-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes pb-result-pop {
  0%   { transform: scale(0.4); opacity: 0.3; }
  65%  { transform: scale(1.18); opacity: 1; }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* betting urgent — 5초 미만: 빨간 테두리 + 빠른 pulse */
.pb-bigball--urgent {
  animation: pb-urgent-pulse 0.5s ease-in-out infinite !important;
  outline: 3px solid #ef4444;
  outline-offset: 3px;
}
@keyframes pb-urgent-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(239,68,68,0.5), inset 0 0 20px rgba(239,68,68,0.1); }
  50%       { box-shadow: 0 0 50px rgba(239,68,68,0.9), inset 0 0 30px rgba(239,68,68,0.2); }
}

/* glow burst — result 발표 순간 배경 번쩍 */
.pb-ball-col--burst::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,0.6) 0%, transparent 70%);
  animation: pb-burst 0.6s ease-out forwards;
  pointer-events: none;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
@keyframes pb-burst {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(0.5); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.5); }
}

/* settling — 볼 주위 회전 링 */
.pb-ball-col--settling {
  position: relative;
}
.pb-ball-col--settling::before {
  content: '';
  position: absolute;
  width: 162px; height: 162px;
  border-radius: 50%;
  border: 2px dashed rgba(245,158,11,0.5);
  animation: pb-orbit 1.2s linear infinite;
  pointer-events: none;
  left: 50%; top: 6px;
  transform: translateX(-50%);
}
@keyframes pb-orbit { 100% { transform: translateX(-50%) rotate(360deg); } }

.pb-bigball-price {
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
}
.pb-right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pb-recent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pb-empty-small { color: #475569; font-size: 11px; }
.pb-mini-ball {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.pb-ball--low   { background: linear-gradient(135deg,#3b82f6,#2563eb); }
.pb-ball--mid   { background: linear-gradient(135deg,#a855f7,#7c3aed); }
.pb-ball--high  { background: linear-gradient(135deg,#f59e0b,#d97706); }
.pb-ball--ultra { background: linear-gradient(135deg,#ef4444,#dc2626); }

/* [2026-07-09 #1] 최근 결과 미니볼 — 홀=빨강/짝=파랑 + 오버▲/언더▼ 코너 배지 */
.pb-mini-ball { position: relative; }
.pb-mini-ball--odd  { background: linear-gradient(135deg,#60a5fa,#2563eb); }
.pb-mini-ball--even { background: linear-gradient(135deg,#f87171,#dc2626); }
.pb-mini-ou {
  position: absolute; top: -3px; right: -3px;
  width: 12px; height: 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-style: normal; font-weight: 900; line-height: 1;
  background: rgba(0,0,0,0.6);
}
.pb-mini-ou--over  { color: #4ade80; }
.pb-mini-ou--under { color: #93c5fd; }

/* 최신 미니볼 slide-in */
.pb-mini-ball--new {
  animation: pb-ball-slidein 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pb-ball-slidein {
  0%   { transform: scale(0) translateX(20px); opacity: 0; }
  100% { transform: scale(1) translateX(0); opacity: 1; }
}

/* 내 결과 compact */
.pb-my-results-compact {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pb-my-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.pb-my-result-row.win  { background: rgba(16,185,129,0.12); }
.pb-my-result-row.lose { background: rgba(239,68,68,0.08); }

/* 베팅 중 내 베팅 compact */
.pb-pending-compact {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pb-pending-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.2);
  color: #a5b4fc;
}

/* ── Games Row — 3패널 가로 배치 ── */
.pb-games-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* [2026-07-07] RANGE 제거 → U/O + O/E 2칸 */
  gap: 8px;
}
.pb-btn.committed {
  border-color: #fbbf24 !important;
  background: rgba(251,191,36,0.14) !important;
  box-shadow: 0 0 12px rgba(251,191,36,0.35);
}
.pb-btn.committed .pb-btn-name { color: #fde047; }
.pb-game-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 6px 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pb-game-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.pb-game-sub {
  font-size: 9px;
  color: #64748b;
  text-align: center;
  margin: 0;
}
.pb-choices-col {
  display: flex;
  flex-direction: row;   /* [2026-07-12 영업 #1-2] 4박스 한 줄 가로: 각 패널 2버튼 가로 → 2패널×2 = odd/even/under/over 가로 */
  gap: 4px;
}
.pb-choices-col > .pb-btn { flex: 1 1 0; min-width: 0; }
.pb-choices-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
/* +/- 스텝 베팅 행 (2026-07-07): 왼쪽 − 버튼 + 오른쪽 BET(+) 버튼 */
.pb-choice-stepper {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.pb-choice-stepper .pb-btn { flex: 1; min-width: 0; }
.pb-step {
  flex: 0 0 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #e2e8f0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.pb-step--minus { color: #fca5a5; border-color: rgba(239,68,68,0.25); }
.pb-step:not(:disabled):active { transform: scale(0.9); }
.pb-step:not(:disabled):hover { filter: brightness(1.25); }
.pb-step:disabled { opacity: 0.22; cursor: not-allowed; }

/* ══ Result 페이지 (2026-07-07): 파워볼/배틀/나의배팅 결과 아카이브 ══ */
.rp-page { padding-bottom: 28px; }
.rp-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.rp-tab {
  flex: 1; padding: 9px 4px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: #94a3b8;
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s;
}
.rp-tab.active {
  color: #fff; border-color: rgba(168,85,247,0.6);
  background: rgba(168,85,247,0.15); box-shadow: 0 0 12px rgba(168,85,247,0.25);
}
.rp-tab:not(.active):hover { filter: brightness(1.3); }
.rp-caption { font-size: 10px; color: #64748b; margin: 0 2px 8px; }
.rp-status { text-align: center; color: #94a3b8; font-size: 13px; padding: 26px; width: 100%; background: none; border: none; }
.rp-err { color: #fca5a5; cursor: pointer; text-decoration: underline; }
.rp-list { display: flex; flex-direction: column; gap: 4px; }
.rp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  font-variant-numeric: tabular-nums;
}
.rp-time { font-size: 11px; color: #64748b; width: 44px; flex-shrink: 0; display: flex; flex-direction: column; line-height: 1.2; }
.rp-time .rp-date { font-size: 9.5px; color: #475569; font-style: normal; }
.rp-round { display: flex; flex-direction: column; line-height: 1.15; width: 54px; flex-shrink: 0; }
.rp-round b { font-size: 11px; font-weight: 800; color: #fbbf24; letter-spacing: -0.2px; }
.rp-round em { font-size: 9px; font-style: normal; color: #64748b; }
.rp-price { font-size: 11px; color: #94a3b8; width: 60px; flex-shrink: 0; }
.rp-bt-prices { font-size: 11px; color: #cbd5e1; flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.rp-bt-prices em { color: #64748b; font-style: normal; }
.rp-num { font-size: 16px; font-weight: 800; width: 28px; text-align: center; flex-shrink: 0; }
.rp-num.u { color: #60a5fa; }
.rp-num.o { color: #f87171; }
.rp-chip { font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.4px; }
.rp-chip.odd, .rp-chip.under { color: #93c5fd; background: rgba(59,130,246,0.14); }
.rp-chip.even, .rp-chip.over { color: #fca5a5; background: rgba(239,68,68,0.14); }
.rp-side { font-size: 13px; font-weight: 800; margin-left: auto; letter-spacing: 0.5px; }
.rp-side.long { color: #34d399; }
.rp-side.short { color: #f87171; }
.rp-side.flat { color: #64748b; }
.rp-more {
  margin-top: 8px; padding: 11px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: #cbd5e1; font-size: 12px; font-weight: 700; cursor: pointer;
}
.rp-more:hover { filter: brightness(1.3); }
.rp-empty { text-align: center; color: #64748b; padding: 32px; font-size: 13px; }
.rp-bet-game { font-size: 11px; color: #94a3b8; width: 78px; flex-shrink: 0; }
.rp-bet-tag {
  font-size: 8px; font-weight: 800; letter-spacing: 0.5px;
  color: #c4b5fd; background: rgba(168,85,247,0.16);
  padding: 2px 6px; border-radius: 5px; flex-shrink: 0;
}
/* [2026-07-09] 게임 구별 태그 — 배틀은 앰버로 파워볼(퍼플)과 시각 분리 */
.rp-bet-tag--battle { color: #fcd34d; background: rgba(245,158,11,0.16); }
.rp-bet-choice { font-size: 12px; font-weight: 700; color: #e2e8f0; }
.rp-bet-amt { font-size: 12px; color: #94a3b8; }
.rp-bet-num { font-size: 14px; font-weight: 800; }
.rp-bet-num.u { color: #60a5fa; }
.rp-bet-num.o { color: #f87171; }
.rp-bet-res { font-size: 11px; font-weight: 800; width: 96px; text-align: right; flex-shrink: 0; margin-left: auto; }
.rp-bet.win { border-color: rgba(16,185,129,0.3); }
.rp-bet.win .rp-bet-res { color: #34d399; }
.rp-bet.lose .rp-bet-res { color: #f87171; }
.rp-bet.void .rp-bet-res { color: #94a3b8; }

/* 베팅 버튼 */
.pb-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 3px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
  min-height: 54px;
}
.pb-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pb-btn:not(:disabled):active { transform: scale(0.95); }
/* [2026-07-17] 파워볼 버튼 글씨 살짝 키움(과하지 않게). */
.pb-btn-name  { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; }
.pb-btn-range { font-size: 9px; color: #64748b; }
.pb-btn-multi { font-size: 11px; font-weight: 700; color: #a78bfa; }
.pb-placed-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}
/* 베팅 확인 배지 — 버튼 위 누적 금액 즉시 표시 (점 대체) */
.pb-placed-badge {
  position: absolute;
  top: 1px; right: 1px;
  font-size: 9px;
  font-weight: 800;
  color: #052e16;
  background: linear-gradient(135deg, #34d399, #10b981);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 1px 6px;
  box-shadow: 0 2px 8px rgba(16,185,129,0.5);
  animation: pb-chip-in 0.25s ease-out;
  z-index: 2;
}

/* 버튼 색상별 */
.pb-btn--under, .pb-btn--odd  { border-color: rgba(59,130,246,0.3); }
.pb-btn--over,  .pb-btn--even { border-color: rgba(239,68,68,0.3); }
.pb-btn--low  { border-color: rgba(59,130,246,0.3); }
.pb-btn--mid  { border-color: rgba(168,85,247,0.3); }
.pb-btn--high { border-color: rgba(245,158,11,0.3); }
.pb-btn--ultra{ border-color: rgba(239,68,68,0.3); }
.pb-btn:not(:disabled):hover { filter: brightness(1.2); }
.pb-btn.placed {
  border-color: #10b981;
  background: rgba(16,185,129,0.15);
  box-shadow: 0 0 12px rgba(16,185,129,0.3), inset 0 0 8px rgba(16,185,129,0.05);
  animation: pb-placed-glow 1.5s ease-in-out infinite;
}
@keyframes pb-placed-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(16,185,129,0.25); }
  50%       { box-shadow: 0 0 20px rgba(16,185,129,0.55); }
}
.pb-btn:not(:disabled):not(.placed):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ── History — [2026-07-06 한화면] 토글 제거, 항상 표시 + 내부 스크롤 ── */
.pb-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px 3px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
.pb-history-hint { font-size: 9px; font-weight: 600; color: #475569; letter-spacing: 0.4px; }
.pb-history-panel {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pb-history-panel--scroll {
  /* [2026-07-09] 히스토리 아래 빈 공간 채움 — 내부 캡 제거, 페이지 스크롤로 전체 노출 */
  overflow-y: visible;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 4px;
  background: rgba(255,255,255,0.02);
}
.pb-hist-row.void { background: rgba(59,130,246,0.07); }
.pb-void-text { color: #93c5fd; font-weight: 700; }
/* [2026-07-12 영업 #1-3] 진행중(대기) 베팅 행 */
.pb-hist-row.pending { background: rgba(251,191,36,0.08); }
.pb-hist-pending { color: #fbbf24; font-weight: 700; font-size: 12px; white-space: nowrap; }

/* ── 승리/패배 풀스크린 연출 (2026-07-06: 결과 이벤트 임팩트) ── */
.pb-celebrate {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pb-celebrate--win  { animation: pb-cel-hold 3s forwards; }
.pb-celebrate--lose { animation: pb-cel-hold 1.7s forwards; }
@keyframes pb-cel-hold { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
.pb-celebrate--win::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(251,191,36,0.30), rgba(0,0,0,0) 62%);
  animation: pb-flash 3s ease-out forwards;
}
.pb-celebrate--lose::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(239,68,68,0.18), rgba(0,0,0,0) 55%);
  animation: pb-flash 1.7s ease-out forwards;
}
@keyframes pb-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
/* [2026-07-08] 화려하게 — 승리 시 회전 광선(sunburst) + 타이틀 글로우 펄스 */
.pb-celebrate--win::after {
  content: "";
  position: absolute; left: 50%; top: 42%;
  width: 640px; height: 640px; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(251,191,36,0.24) 0deg 9deg, rgba(251,191,36,0) 9deg 18deg);
  -webkit-mask: radial-gradient(circle, rgba(0,0,0,0) 26%, #000 42%, rgba(0,0,0,0) 74%);
  mask: radial-gradient(circle, rgba(0,0,0,0) 26%, #000 42%, rgba(0,0,0,0) 74%);
  animation: pb-rays-spin 3s linear forwards, pb-flash 3s ease-out forwards;
  pointer-events: none;
}
@keyframes pb-rays-spin { to { transform: translate(-50%, -50%) rotate(150deg); } }
.pb-celebrate--win .pb-celebrate-title {
  font-size: 66px;
  animation: pb-celebrate-pop 0.55s cubic-bezier(0.34,1.56,0.64,1), pb-title-glow 0.85s ease-in-out infinite alternate;
}
@keyframes pb-title-glow {
  from { text-shadow: 0 0 26px rgba(251,191,36,0.85), 0 4px 14px rgba(0,0,0,0.6); }
  to   { text-shadow: 0 0 48px rgba(251,191,36,1), 0 0 76px rgba(251,191,36,0.6), 0 4px 14px rgba(0,0,0,0.6); }
}
.pb-celebrate-burst { position: absolute; left: 50%; top: 42%; z-index: 1; }
.pb-confetti {
  position: absolute;
  width: 8px; height: 12px;
  border-radius: 2px;
  background: var(--cc);
  opacity: 0;
  animation: pb-confetti-fly 1.3s cubic-bezier(0.15, 0.6, 0.4, 1) var(--dl) forwards;
}
@keyframes pb-confetti-fly {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 130px)) rotate(560deg) scale(0.35); opacity: 0; }
}
.pb-celebrate-text {
  position: relative;
  text-align: center;
  animation: pb-celebrate-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pb-celebrate-title {
  font-family: var(--gb-font-display);
  font-size: 58px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fde047;
  text-shadow: 0 0 32px rgba(251,191,36,0.85), 0 4px 14px rgba(0,0,0,0.6);
}
.pb-celebrate-amount {
  font-family: var(--gb-font-display);
  font-size: 40px;
  font-weight: 900;
  color: #6ee7b7;
  text-shadow: 0 0 24px rgba(16,185,129,0.7);
  margin-top: 4px;
  animation: pb-amount-pulse 0.8s ease-in-out 0.35s 2;
}
.pb-celebrate-title--lose {
  color: #94a3b8;
  font-size: 30px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  animation: pb-lose-shake 0.4s ease-in-out;
}
.pb-celebrate-amount--lose {
  color: #fca5a5;
  font-size: 22px;
  text-shadow: none;
  animation: none;
}
@keyframes pb-celebrate-pop { 0% { transform: scale(0.3); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pb-amount-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes pb-lose-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .pb-confetti { display: none; }
  .pb-celebrate-text, .pb-celebrate-title--lose, .pb-celebrate-amount { animation: none; }
}

/* ── 내 베팅 고정높이 칩 스트립 (베팅해도 아래 버튼 안 밀림) ── */
.pb-mybets-slot {
  height: 34px;
  display: flex;
  gap: 4px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 3px;
  scrollbar-width: none;
}
.pb-mybets-slot::-webkit-scrollbar { display: none; }
.pb-bet-chip {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.4);
  color: #c4b5fd;
  white-space: nowrap;
}
.pb-bet-chip.pending { animation: pb-chip-in 0.25s ease-out; }
.pb-bet-chip.win  { background: rgba(16,185,129,0.16); border-color: rgba(16,185,129,0.5); color: #6ee7b7; }
.pb-bet-chip.lose { background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.4);  color: #fca5a5; }
.pb-mybets-empty { font-size: 10px; color: #475569; }
@keyframes pb-chip-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }


/* ── 페이즈바 잔고 칩 (헤더 통합 후 잔고 위치) ── */
.pb-phase-balance {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: #e2e8f0;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0; /* [2026-07-09 B3] 긴 DRAWING 라벨에 밀려 배지가 밖으로 나가지 않게 */
}
.pb-phase-balance b { color: #a78bfa; font-size: 10px; font-weight: 800; }
/* [2026-07-09 B3] 긴 위상 라벨은 말줄임 처리(테두리 밖 넘침 방지) */
.pb-phase-bar-inner .pb-phase-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* [2026-07-09 B5] 맨위로 버튼 */
.pb-scrolltop {
  position: fixed;
  right: 14px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 160;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(168,85,247,0.5);
  background: rgba(20,10,35,0.9); color: #d8b4fe;
  font-size: 20px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 12px rgba(168,85,247,0.3);
  cursor: pointer;
}
.pb-scrolltop:active { transform: scale(0.94); }

/* [2026-07-09 #2-3] 배틀 내 베팅 상태 바 (확정 후 지속 표시) */
.bp-mybet-bar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  width: calc(100% - 20px); max-width: 460px;
  z-index: 90;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 12px;
  background: rgba(10,12,20,0.92);
  border: 1px solid rgba(139,92,246,0.35);
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
  font-family: "Orbitron", sans-serif;
  font-size: 12px; font-weight: 800;
  -webkit-user-select: none; user-select: none;
}
.bp-mybet-dir { padding: 2px 8px; border-radius: 6px; font-size: 11px; }
.bp-mybet-dir--up { color: #00d4aa; background: rgba(0,212,170,0.14); }
.bp-mybet-dir--down { color: #ef4444; background: rgba(239,68,68,0.14); }
.bp-mybet-amt { color: #fbbf24; }
.bp-mybet-entry { color: rgba(255,255,255,0.55); font-size: 10px; font-weight: 700; }
.bp-mybet-status { margin-left: auto; color: #a78bfa; font-size: 11px; }
.bp-mybet-status--win { color: #34d399; }
.bp-mybet-status--lose { color: #f87171; }

/* [2026-07-09] 자동베팅 — 슬립 회수선택 + 상태바 + 경고팝업 */
.bp-auto-row { display: flex; align-items: center; gap: 5px; margin: 8px 0 2px; }
/* [2026-07-10] AUTO 라벨 = 탭하면 설명 뜨는 버튼 (아이콘 + AUTO + ?) */
.bp-auto-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; font-size: 11px; font-weight: 800; color: #a78bfa;
  background: rgba(168,85,247,0.10); border: 1px solid rgba(168,85,247,0.30);
  border-radius: 8px; padding: 5px 8px; cursor: pointer;
  white-space: nowrap; letter-spacing: 0.04em;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.bp-auto-label:hover { background: rgba(168,85,247,0.18); border-color: rgba(168,85,247,0.5); }
.bp-auto-label:active { transform: scale(0.95); }
.bp-auto-ico { color: #c4b5fd; flex-shrink: 0; }
.bp-auto-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%;
  background: rgba(168,85,247,0.35); color: #ede9fe;
  font-size: 9px; font-weight: 900;
}
.bp-auto-cell {
  flex: 1; font-family: inherit; font-size: 12px; font-weight: 800;
  padding: 7px 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, #1a1f29, #12151c);
  border: 1px solid #2c3340; color: #aab2c0;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.bp-auto-cell:hover { border-color: #3d4657; color: #cdd3de; }
.bp-auto-cell.active {
  background: linear-gradient(180deg, rgba(168,85,247,0.30), rgba(139,92,246,0.14));
  border-color: #a855f7; color: #ede9fe;
  box-shadow: 0 0 12px rgba(168,85,247,0.40), inset 0 0 8px rgba(168,85,247,0.15);
}
.bp-auto-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  width: calc(100% - 20px); max-width: 460px; z-index: 91;
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-radius: 12px; background: rgba(30,10,45,0.94);
  border: 1px solid rgba(168,85,247,0.55);
  box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 14px rgba(168,85,247,0.25);
  font-family: "Orbitron", sans-serif; font-size: 12px; font-weight: 800;
}
.bp-auto-tag { color: #d8b4fe; display: inline-flex; align-items: center; gap: 3px; }
.bp-auto-dir--up { color: #00d4aa; }
.bp-auto-dir--down { color: #ef4444; }
.bp-auto-remain { margin-left: auto; color: #fbbf24; font-size: 11px; }
.bp-auto-stop {
  font-family: inherit; font-size: 11px; font-weight: 800; color: #fff;
  background: #dc2626; border: none; border-radius: 8px; padding: 5px 12px; cursor: pointer;
}
.bp-auto-warn-backdrop {
  position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.bp-auto-warn {
  width: 100%; max-width: 380px; background: #12151f;
  border: 1px solid rgba(168,85,247,0.4); border-radius: 16px; padding: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.7);
}
.bp-auto-warn-title { font-size: 17px; font-weight: 900; color: #d8b4fe; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.bp-auto-warn-body { font-size: 13.5px; line-height: 1.6; color: #cdd3de; margin-bottom: 16px; }
.bp-auto-warn-body b { color: #fff; }
.bp-auto-warn-foot { display: flex; gap: 10px; }
.bp-auto-warn-go {
  flex: 1.6; font-family: inherit; font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(90deg,#a855f7,#7c3aed); border: none; border-radius: 12px; padding: 12px; cursor: pointer;
}
.bp-auto-warn-cancel {
  flex: 1; font-family: inherit; font-size: 14px; font-weight: 800; color: #cdd3de;
  background: #1b1f28; border: 1px solid #2c3340; border-radius: 12px; padding: 12px; cursor: pointer;
}

/* ── 결과 10초 승패 배너 (볼 라벨 확장) ── */
.pb-outcome-win {
  font-size: 15px !important;
  color: #052e16 !important;
  background: linear-gradient(135deg, #34d399, #10b981) !important;
  border-color: rgba(255,255,255,0.35) !important;
  box-shadow: 0 0 24px rgba(16,185,129,0.7);
  animation: pb-outcome-pulse 0.9s ease-in-out infinite !important;
}
.pb-outcome-lose {
  font-size: 14px !important;
  color: #fecaca !important;
  background: rgba(153,27,27,0.55) !important;
  border-color: rgba(239,68,68,0.6) !important;
}
@keyframes pb-outcome-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 18px rgba(16,185,129,0.55); }
  50%      { transform: scale(1.06); box-shadow: 0 0 34px rgba(16,185,129,0.95); }
}

/* ── 결과 페이즈 버튼 당첨/미당첨 상태 (10초 내내 유지 — 초보자 즉시 이해) ── */
.pb-btn.hit {
  border-color: #10b981 !important;
  background: rgba(16,185,129,0.24) !important;
  box-shadow: 0 0 24px rgba(16,185,129,0.75), inset 0 0 18px rgba(16,185,129,0.28);
  animation: pb-hit-glow 0.8s ease-in-out infinite;
  opacity: 1 !important;
  z-index: 1;
}
.pb-btn.hit .pb-btn-name { color: #6ee7b7; }
/* 내가 걸어서 맞춘 버튼 — 금색 잭팟 (남이 맞춘 초록과 구분) */
.pb-btn.hit.placed {
  border-color: #fbbf24 !important;
  background: linear-gradient(135deg, rgba(251,191,36,0.35), rgba(16,185,129,0.3)) !important;
  animation: pb-jackpot-glow 0.55s ease-in-out infinite !important;
  transform: scale(1.04);
}
.pb-btn.hit.placed .pb-btn-name { color: #fde047; text-shadow: 0 0 10px rgba(251,191,36,0.9); }
@keyframes pb-jackpot-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(251,191,36,0.6); }
  50%      { box-shadow: 0 0 30px rgba(251,191,36,1), 0 0 50px rgba(251,191,36,0.5); }
}
/* [2026-07-08] 베팅 확인(잠금) 버튼 — 작고 깔끔하게(초록 톤, 그라데이션·펄스 제거) */
.pb-confirm-btn {
  width: 100%; margin: 6px 0 2px; padding: 8px 10px;
  border: 1px solid rgba(16,185,129,0.55); border-radius: 9px;
  font-family: inherit;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px;
  color: #6ee7b7;
  background: rgba(16,185,129,0.16);
  cursor: pointer;
  transition: background 0.15s;
}
.pb-confirm-btn:active { transform: scale(0.99); background: rgba(16,185,129,0.26); }
.pb-confirm-locked {
  width: 100%; margin: 6px 0 2px; padding: 7px;
  text-align: center; border-radius: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.2px;
  color: #6ee7b7;
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.3);
}

/* ══════════════════════════════════════════════════════════
   [2026-07-09] BET SLIP / CART — bottom-sheet 베팅 입력 모델
   ══════════════════════════════════════════════════════════ */
.pb-cartbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: 480px; z-index: 150;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); cursor: pointer;
  font-weight: 800; font-size: 17px; color: #fff;
  background: linear-gradient(90deg, #ec4899, #a855f7, #7c3aed);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.4);
}
.pb-cartbar-cnt {
  min-width: 26px; height: 26px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 8px; font-size: 14px; font-weight: 800;
  color: #1a1200; background: #f5b301;
}

.pb-backdrop {
  position: fixed; inset: 0; z-index: 195;
  background: rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.pb-backdrop.show { opacity: 1; pointer-events: auto; }

.pb-sheet {
  position: fixed; left: 50%; bottom: 0;
  transform: translateX(-50%) translateY(100%);
  width: 100%; max-width: 480px; max-height: 92vh; max-height: 92dvh; z-index: 200; /* [2026-07-09 B4] iOS 툴바 뒤로 잘림 방지: dvh */
  display: flex; flex-direction: column;
  background: #0d0f14;
  border-top: 1px solid #2a2d36;
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.7);
  transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.pb-sheet.show { transform: translateX(-50%) translateY(0); }
.pb-sheet-grip {
  width: 40px; height: 4px; border-radius: 3px;
  background: #3a3f4c; margin: 8px auto 0;
}
/* [2026-07-16] 아이폰/모바일: 베팅 선택 바스켓을 하단시트 대신 ★화면 위쪽 둥근 팝업★으로 올림.
   (하단은 iOS Safari 툴바에 가리고 엄지로 닿기 힘듦 → 높이 올린 팝업. 데스크톱은 위 하단시트 유지.) */
@media (max-width: 560px) {
  /* 아이폰/모바일: 하단시트 대신 ★화면 중앙 팝업★. opacity로 확실히 표시(하단시트 transform이
     iOS서 안 보이던 문제 → 중앙+opacity로 견고화). 데스크톱은 위 하단시트 유지. */
  .pb-sheet {
    top: 50%; bottom: auto; left: 50%;
    width: calc(100% - 20px); max-width: 460px;
    max-height: 86dvh; max-height: 86vh;
    border-radius: 20px;                                 /* 전체 둥근 팝업 */
    transform: translate(-50%, -50%);                    /* 화면 정중앙 고정 */
    opacity: 0; pointer-events: none;                    /* 숨김 = 투명(위치는 중앙 유지) */
    transition: opacity 0.22s ease;
    box-shadow: 0 18px 70px rgba(0,0,0,0.8);
  }
  .pb-sheet.show { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
  .pb-sheet-grip { display: none; }                      /* 팝업엔 바텀시트 그립 불필요 */
}
.pb-sheet-head {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; border-bottom: 1px solid #1a1d24;
}
.pb-sheet-title { font-weight: 900; font-size: 17px; letter-spacing: 1px; color: #fff; }
.pb-sheet-cnt {
  margin-left: auto; min-width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 14px; font-weight: 800;
  color: #fff; background: #a855f7;
}
.pb-sheet-close { margin-left: 6px; color: #e8ebf1; font-size: 22px; cursor: pointer; }

.pb-sheet-body { flex: 1; overflow-y: auto; padding: 10px 14px; }

.pb-stake-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.pb-stake-reset { color: #cdd3de; font-size: 26px; cursor: pointer; }
.pb-stake-amt { color: #a855f7; font-weight: 800; font-size: 24px; }
.pb-stake-amt small { font-size: 13px; color: #8b8f9c; margin-left: 4px; }
/* [#18 2026-07-13] 베팅금액 직접 입력창 — 표시와 동일 스타일 */
.pb-stake-input {
  width: 110px; max-width: 46vw; background: transparent; border: none; outline: none;
  color: #a855f7; font-weight: 800; font-size: 24px; font-family: inherit; text-align: center; padding: 0;
  -webkit-user-select: text; user-select: text;
}
.pb-stake-input::placeholder { color: rgba(168,85,247,0.45); }
.pb-stake-step { display: flex; align-items: center; gap: 12px; }
.pb-stake-pm {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid #2c3340; background: #161a22; color: #dfe4ec;
  font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.pb-stake-pm:active { background: #212836; }
.pb-stake-pm:disabled { opacity: 0.4; }

.pb-amt-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
  margin-bottom: 10px;
}
.pb-amt-cell {
  font-family: inherit;
  background: #161a22; border: 1px solid #2c3340; color: #dfe4ec;
  font-weight: 700; font-size: 15px; border-radius: 10px;
  padding: 9px 6px; text-align: center; cursor: pointer;
}
.pb-amt-cell:active { background: #212836; }
.pb-amt-cell--max { color: #a855f7; font-weight: 800; }
.pb-amt-cell-u {
  display: block; margin-top: 2px;
  font-size: 10px; font-weight: 700; color: #8b8f9c;
}

.pb-sheet-divider { height: 1px; background: #1e222b; margin: 2px 0 8px; }

.pb-bet-item {
  background: #151922; border: 1px solid #262c38; border-radius: 10px;
  padding: 8px 12px; margin-bottom: 6px;
}
.pb-bet-item-top { display: flex; align-items: center; gap: 10px; }
.pb-bet-item-mkt { font-size: 12px; color: #8b8f9c; font-weight: 700; }
.pb-bet-item-x { margin-left: auto; color: #cdd3de; font-size: 18px; line-height: 1; cursor: pointer; }
.pb-bet-item-bot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 3px;
}
.pb-bet-item-pick { font-weight: 800; font-size: 15px; color: #fff; }
.pb-bet-item-odd { font-weight: 800; font-size: 14px; color: #22c55e; }

.pb-sumrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 2px; font-size: 14px;
}
.pb-sumrow-k { color: #cdd3de; font-weight: 600; }
.pb-sumrow-o { color: #f59e0b; font-weight: 800; }
.pb-sumrow-g { color: #22c55e; font-weight: 800; }
.pb-sumrow--small { font-size: 12px; color: #8b8f9c; padding: 3px 2px; }
.pb-sumrow-v { color: #c3cad6; font-weight: 700; }

.pb-sheet-empty {
  text-align: center; color: #8b8f9c;
  padding: 14px 12px; font-size: 13px; line-height: 1.5;
}

.pb-sheet-foot {
  display: flex; gap: 10px;
  /* [2026-07-13] iPhone Pro 17에서 Place Bet/Clear가 하단 UI에 가려 안 보이던 문제 —
     하단 여백을 넉넉히 올려 홈 인디케이터/툴바를 확실히 회피. flex-shrink:0으로 foot가 절대 안 눌리게. */
  flex-shrink: 0;
  padding: 12px 14px calc(28px + env(safe-area-inset-bottom, 8px));
  border-top: 1px solid #171b22;
}
.pb-sheet-done {
  flex: 1.6; font-family: inherit;
  background: linear-gradient(90deg, #ec4899, #a855f7, #7c3aed);
  color: #fff; font-weight: 800; font-size: 16px;
  border: none; border-radius: 12px; padding: 13px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 20px rgba(124,58,237,0.4); cursor: pointer;
}
.pb-sheet-done:active { transform: scale(0.99); }
.pb-sheet-clear {
  flex: 1; font-family: inherit;
  background: #1b1f28; color: #cdd3de; font-weight: 800; font-size: 15px;
  border: 1px solid #2c3340; border-radius: 12px; padding: 13px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
}
/* 내가 걸었는데 틀린 버튼 — 빨간 ✖ + 대각선 줄 (2026-07-06) */
.pb-btn.miss {
  border: 2px solid #ef4444 !important;
  background: rgba(239,68,68,0.14) !important;
  opacity: 1 !important;
  overflow: hidden;
}
.pb-btn.miss .pb-btn-name { color: #fca5a5; }
.pb-btn.miss::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right,
    transparent calc(50% - 1.5px), #ef4444 calc(50% - 1.5px),
    #ef4444 calc(50% + 1.5px), transparent calc(50% + 1.5px));
  z-index: 3;
}
@keyframes pb-hit-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(16,185,129,0.45); }
  50%      { box-shadow: 0 0 22px rgba(16,185,129,0.9); }
}

/* ── 10초 대기 긴장감 — 페이즈바 깜박임 카운트다운 + 코인 비 ── */
.pb-phase-tension {
  animation: pb-tension-blink 0.55s step-end infinite;
  font-weight: 800;
}
@keyframes pb-tension-blink {
  0%, 100% { color: #fcd34d; }
  50%      { color: #ef4444; }
}
.pb-phase-bar--result {
  animation: pb-bar-pulse 1.1s ease-in-out infinite;
}
@keyframes pb-bar-pulse {
  0%, 100% { border-color: rgba(16,185,129,0.25); }
  50%      { border-color: rgba(251,191,36,0.7); }
}
.pb-coin {
  position: absolute;
  top: -48px;
  animation: pb-coin-fall 1.7s ease-in forwards;
  z-index: 2;
}
@keyframes pb-coin-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(680deg); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) { .pb-coin { display: none; } }

/* ── 히스토리 전체 보기 링크 ── */
.pb-history-all {
  background: none;
  border: none;
  color: #a78bfa;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.4px;
}

/* ── 저화면(디바이스 높이 ≤700px, 실 뷰포트 ≈584px 이하) — 추가 압축 ──
   주의: media는 디바이스 뷰포트를 평가(앱 컨테이너는 dvh-116px). 812기기는 위 기본값으로 커버. */
@media (max-height: 700px) {
  .pb-ball-mega { width: 96px; height: 96px; }
  .pb-ball-mega-num { font-size: 42px; }
  .pb-history-panel--scroll { max-height: none; }
  .pb-btn { min-height: 46px; }
  .pb-ball-mega-wrap { padding: 3px 0 2px; gap: 4px; }
}
.pb-hist-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.pb-hist-row.win  { background: rgba(16,185,129,0.08); }
.pb-hist-row.lose { background: rgba(239,68,68,0.06); }
.pb-hist-game  { flex: 1; color: #94a3b8; }
.pb-hist-amount { min-width: 60px; text-align: center; color: #64748b; font-size: 11px; }

.pb-header {
  text-align: center;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #1a0a2e 0%, #16213e 50%, #0a1628 100%);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(138, 43, 226, 0.3);
}
.pb-header h2 {
  font-size: 22px;
  margin: 0 0 12px;
  background: linear-gradient(90deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pb-price {
  margin-bottom: 8px;
}
.pb-label {
  font-size: 11px;
  color: #8b8fa3;
  display: block;
}
.pb-value {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  font-family: "Inter", monospace;
}
.pb-number {
  margin: 12px 0;
}
.pb-ball {
  display: inline-block;
  font-size: 42px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
  animation: pb-pulse 2s infinite;
}
@keyframes pb-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.8);
  }
}
.pb-balance {
  font-size: 18px;
  font-weight: 700;
  color: #10b981;
  margin-top: 8px;
}

/* 카운트다운 */
.pb-countdown {
  text-align: center;
  margin: 16px 0;
  padding: 20px;
  background: rgba(124, 58, 237, 0.15);
  border-radius: 12px;
  border: 1px solid rgba(124, 58, 237, 0.3);
}
.pb-countdown-circle {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #f97316);
  animation: pb-shake 0.5s infinite;
  margin-bottom: 8px;
}
@keyframes pb-shake {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
.pb-countdown span {
  display: block;
  color: #a78bfa;
  font-size: 13px;
}

/* 결과 */
.pb-result {
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  margin: 12px 0;
  font-weight: 700;
}
.pb-result span {
  display: block;
}
.pb-result.pb-win {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.2),
    rgba(52, 211, 153, 0.1)
  );
  border: 1px solid #10b981;
  color: #34d399;
}
.pb-result.pb-lose {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.pb-payout {
  font-size: 24px;
  color: #10b981;
  margin-top: 4px;
}

/* 베팅 금액 — 3×2 그리드 */
/* [2026-07-06 한화면] 3x2 그리드(2줄) → 6칩 1줄 */
.pb-amounts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 4px 0 2px;
}
.pb-amt-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 7px 2px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.2s;
}
.pb-amt-unit {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #a78bfa;
  text-transform: uppercase;
}
.pb-amt-btn.active {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  border-color: #a855f7;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}
.pb-amt-btn.active .pb-amt-unit {
  color: rgba(255, 255, 255, 0.8);
}
.pb-amt-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 게임 카드 */
.pb-games {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pb-game-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px;
}
.pb-game-card h3 {
  font-size: 15px;
  margin: 0 0 4px;
  color: #e2e8f0;
}
.pb-rule {
  font-size: 11px;
  color: #64748b;
  margin: 0 0 10px;
}
.pb-choices {
  display: flex;
  gap: 8px;
}
.pb-range-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* 버튼 — [2026-07-06 한화면] 이 늦은 선언이 위 컴팩트 .pb-btn(10239행대)을 덮어쓰던 것 교정:
   구 레이아웃(pb-under/pb-range-grid) 전용값(14px)이 현행 파워볼 버튼까지 키우고 있었음 */
.pb-btn {
  flex: 1;
  padding: 5px 3px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.pb-btn:active:not(:disabled) {
  transform: scale(0.96);
}
.pb-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pb-btn .pb-range {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
  font-weight: 400;
}
.pb-btn .pb-multi {
  display: block;
  font-size: 12px;
  color: #a855f7;
  margin-top: 4px;
}

.pb-under {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.1);
}
.pb-under:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.25);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
}
.pb-over {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
}
.pb-over:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.25);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}
.pb-low {
  border-color: rgba(34, 211, 238, 0.4);
  background: rgba(34, 211, 238, 0.08);
}
.pb-mid {
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.08);
}
.pb-high {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.08);
}
.pb-ultra {
  border-color: rgba(236, 72, 153, 0.5);
  background: rgba(236, 72, 153, 0.12);
}
.pb-ultra:hover:not(:disabled) {
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.4);
}
.pb-odd {
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.08);
}
.pb-even {
  border-color: rgba(251, 146, 60, 0.4);
  background: rgba(251, 146, 60, 0.08);
}

/* 최근 결과 */
.pb-recent {
  margin-top: 16px;
}
.pb-recent h3 {
  font-size: 14px;
  color: #94a3b8;
  margin: 0 0 8px;
}
.pb-recent-balls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pb-empty {
  color: #475569;
  font-size: 13px;
}
.pb-mini-ball {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.pb-mini-ball.under {
  background: rgba(59, 130, 246, 0.6);
}
.pb-mini-ball.over {
  background: rgba(239, 68, 68, 0.6);
}

/* 히스토리 */
.pb-history {
  margin-top: 16px;
}
.pb-history h3 {
  font-size: 14px;
  color: #94a3b8;
  margin: 0 0 8px;
}
.pb-hist-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
  font-size: 13px;
}
.pb-hist-item.win {
  background: rgba(16, 185, 129, 0.08);
}
.pb-hist-item.lose {
  background: rgba(239, 68, 68, 0.06);
}
.pb-win-text {
  color: #10b981;
  font-weight: 700;
}
.pb-lose-text {
  color: #ef4444;
}

/* ═══ 모드 탭 (FLIP / POWERBALL) ═══ */
.pb-mode-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 4px;
}
.pb-mode-tab {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}
.pb-mode-tab.active {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}

/* ═══ 파워볼 섹션 ═══ */
.pb-section {
  animation: pb-fadein 0.3s ease;
}
@keyframes pb-fadein {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 게임 서브 탭 */
.pb-game-tabs {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}
.pb-gt {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.pb-gt.active {
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.5);
  color: #a855f7;
}

.pb-result-title {
  font-size: 22px;
  display: block;
  margin-bottom: 4px;
}

/* ═══ COIN FLIP — PREMIUM ═══ */

/* 스테이지 */
.cf-stage {
  position: relative;
  min-height: 200px;
  margin-bottom: 12px;
}

/* idle 비주얼 — 프리미엄 코인 */
.cf-idle-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0 12px;
}
.cf-coin-glow {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.3), transparent 70%);
  animation: coinPulse 2s ease-in-out infinite;
  filter: blur(20px);
}
.cf-coin-display {
  position: relative;
  z-index: 2;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f59e0b, #d97706, #b45309);
  box-shadow:
    0 0 30px rgba(245, 158, 11, 0.4),
    0 0 60px rgba(245, 158, 11, 0.15),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: coinFloat 3s ease-in-out infinite;
}
.cf-coin-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cf-coin-symbol {
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.cf-coin-text {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.cf-stage-label {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(245, 158, 11, 0.7);
  text-transform: uppercase;
}
@keyframes coinPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.2);
  }
}
@keyframes coinFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* 영상 영역 */
.cf-video-area {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0a0e1a;
  margin: 0 auto;
  width: 100%;
  aspect-ratio: 9/16;
  max-height: 50vh;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease;
}
.cf-video-area.hide {
  max-height: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
}
.cf-video-area.show {
  max-height: 60vh;
  opacity: 1;
}
.cf-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 결과 오버레이 */
.cf-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  animation: cfFadeIn 0.3s ease;
}
.cf-overlay.win {
  box-shadow: inset 0 0 60px rgba(16, 185, 129, 0.4);
}
.cf-overlay.lose {
  box-shadow: inset 0 0 60px rgba(239, 68, 68, 0.4);
}
.cf-overlay-icon {
  font-size: 52px;
}
.cf-overlay-text {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 4px;
  margin-top: 4px;
}
.cf-overlay.win .cf-overlay-text {
  color: #10b981;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}
.cf-overlay.lose .cf-overlay-text {
  color: #ef4444;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}
.cf-overlay-detail {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}
.cf-overlay-amt {
  font-size: 24px;
  font-weight: 800;
  margin-top: 8px;
  color: #10b981;
}
.cf-overlay-amt.lose {
  color: #ef4444;
}
@keyframes cfFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* SHORT/LONG 버튼 — 프리미엄 */
.cf-sides {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.cf-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  border-radius: 12px;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.cf-side::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cf-side--short::before {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.15), transparent);
}
.cf-side--long::before {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.15), transparent);
}
.cf-side--active::before {
  opacity: 1;
}
.cf-side--short.cf-side--active {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}
.cf-side--long.cf-side--active {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}
.cf-side__arrow {
  font-size: 20px;
  position: relative;
  z-index: 1;
}
.cf-side__label {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
}
.cf-side--short .cf-side__label {
  color: #ef4444;
}
.cf-side--long .cf-side__label {
  color: #10b981;
}
.cf-side__multi {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

/* 칩 — 프리미엄 */
.cf-chips {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cf-chip {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}
.cf-chip.active {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.2),
    rgba(234, 179, 8, 0.1)
  );
  border-color: rgba(245, 158, 11, 0.5);
  color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
}

/* FLIP 버튼 — 골드 프리미엄 */
.cf-flip-btn {
  position: relative;
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
  border: none;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(135deg, #f59e0b, #d97706, #b45309);
  box-shadow:
    0 4px 16px rgba(245, 158, 11, 0.3),
    0 0 0 1px rgba(245, 158, 11, 0.2);
  transition: all 0.2s ease;
}
.cf-flip-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}
.cf-flip-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cf-flip-btn__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transform: translateX(-100%);
  animation: btnShimmer 3s ease-in-out infinite;
}
.cf-flip-btn--spinning .cf-flip-btn__glow {
  animation-duration: 0.5s;
}
.cf-flip-btn__text {
  position: relative;
  z-index: 1;
}
@keyframes btnShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 히스토리 */
.cf-hist {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.cf-h {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.cf-h.w {
  background: rgba(16, 185, 129, 0.5);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.cf-h.l {
  background: rgba(239, 68, 68, 0.4);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ═══ HOME — Chart Section ═══ */
.gb-chart-section {
  position: relative;
  background: rgba(6, 12, 24, 0.6);
  border: 1px solid rgba(6, 182, 212, 0.1);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}
.chart-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.chart-title {
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 1px;
}
.chart-stats {
  display: flex;
  gap: 12px;
}
.chart-stat {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}
.chart-stat strong {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  margin-left: 2px;
}
.home-chart-canvas {
  width: 100%;
  height: 280px;
  display: block;
}

/* 배틀 결과 골렘 */
.bp-overlay__golem {
  width: 55%;
  max-width: 220px;
  height: auto;
  display: block;
  margin: 0 auto 8px;
  filter: drop-shadow(0 0 25px rgba(139, 92, 246, 0.5));
  animation: golem-float 2s ease-in-out infinite;
}
@keyframes golem-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ═══ Reel Match Popup ═══ */
.bp-match-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 99999;
  font-family: "Orbitron", sans-serif;
  font-weight: 900;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
  animation:
    matchPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    matchPopOut 0.3s ease-in 2s forwards;
}

@keyframes matchPopIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
@keyframes matchPopOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
}

.bp-match-popup--tie {
  font-size: 48px;
  color: #94a3b8;
  text-shadow: 0 0 20px rgba(148, 163, 184, 0.5);
}

.bp-match-popup--bonus {
  font-size: 42px;
  color: #facc15;
  text-shadow:
    0 0 30px rgba(250, 204, 21, 0.8),
    0 0 60px rgba(250, 204, 21, 0.4);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.bp-match-popup--jackpot {
  font-size: 48px;
  color: #fbbf24;
  text-shadow:
    0 0 40px rgba(251, 191, 36, 0.9),
    0 0 80px rgba(251, 191, 36, 0.5),
    0 0 120px rgba(245, 158, 11, 0.3);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}

.bp-match-popup--super {
  font-size: 52px;
  color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #ef4444, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 40px rgba(245, 158, 11, 0.8))
    drop-shadow(0 0 80px rgba(168, 85, 247, 0.5));
  animation:
    matchPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    superGlow 0.5s ease-in-out infinite alternate,
    matchPopOut 0.3s ease-in 2.5s forwards;
}

@keyframes superGlow {
  0% {
    filter: drop-shadow(0 0 40px rgba(245, 158, 11, 0.8))
      drop-shadow(0 0 80px rgba(168, 85, 247, 0.5));
  }
  100% {
    filter: drop-shadow(0 0 60px rgba(251, 191, 36, 1))
      drop-shadow(0 0 100px rgba(239, 68, 68, 0.8));
  }
}

/* Reel bounce on land */
.bp-reel-bounce {
  animation: reelBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes reelBounce {
  0% {
    transform: translateY(-10px);
  }
  40% {
    transform: translateY(4px);
  }
  70% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Reel spin wiggle */
@keyframes reelSpin {
  0% {
    transform: translateY(-2px) scale(1.02);
  }
  50% {
    transform: translateY(2px) scale(0.98);
  }
  100% {
    transform: translateY(-2px) scale(1.02);
  }
}

/* Radial light rays for jackpot */
.bp-rays {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300vw;
  height: 300vh;
  transform: translate(-50%, -50%);
  z-index: 99991;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(251, 191, 36, 0.15) 10deg,
    transparent 20deg,
    rgba(251, 191, 36, 0.1) 30deg,
    transparent 40deg,
    rgba(251, 191, 36, 0.15) 50deg,
    transparent 60deg,
    rgba(251, 191, 36, 0.1) 70deg,
    transparent 80deg,
    rgba(251, 191, 36, 0.15) 90deg,
    transparent 100deg,
    rgba(251, 191, 36, 0.1) 110deg,
    transparent 120deg,
    rgba(251, 191, 36, 0.15) 130deg,
    transparent 140deg,
    rgba(251, 191, 36, 0.1) 150deg,
    transparent 160deg,
    rgba(251, 191, 36, 0.15) 170deg,
    transparent 180deg,
    rgba(251, 191, 36, 0.1) 190deg,
    transparent 200deg,
    rgba(251, 191, 36, 0.15) 210deg,
    transparent 220deg,
    rgba(251, 191, 36, 0.1) 230deg,
    transparent 240deg,
    rgba(251, 191, 36, 0.15) 250deg,
    transparent 260deg,
    rgba(251, 191, 36, 0.1) 270deg,
    transparent 280deg,
    rgba(251, 191, 36, 0.15) 290deg,
    transparent 300deg,
    rgba(251, 191, 36, 0.1) 310deg,
    transparent 320deg,
    rgba(251, 191, 36, 0.15) 330deg,
    transparent 340deg,
    rgba(251, 191, 36, 0.1) 350deg,
    transparent 360deg
  );
  animation:
    raysRotate 3s linear infinite,
    raysFadeIn 0.3s ease forwards;
  opacity: 0;
}
@keyframes raysRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes raysFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Screen shake */
.bp-shake {
  animation: screenShake 0.5s ease-in-out;
}
@keyframes screenShake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-4px, -2px);
  }
  20% {
    transform: translate(4px, 2px);
  }
  30% {
    transform: translate(-3px, 3px);
  }
  40% {
    transform: translate(3px, -3px);
  }
  50% {
    transform: translate(-2px, 2px);
  }
  60% {
    transform: translate(2px, -1px);
  }
  70% {
    transform: translate(-1px, 1px);
  }
  80% {
    transform: translate(1px, -1px);
  }
  90% {
    transform: translate(-1px, 0px);
  }
}

/* Flash overlay */
@keyframes matchFlashIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Transaction status badges (WalletPage history tab) ── */
.wp-tx-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  letter-spacing: 0.5px;
  display: inline-block;
  vertical-align: middle;
}
.wp-tx-status-failed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.wp-tx-status-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.wp-tx-status-success {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════
   P5 — Lottery Tumbler (여러 작은 볼 + 중앙 큰 볼)
   ═══════════════════════════════════════════════════════════════════════ */
.pb-tumbler-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px 0 10px; }
.pb-tumbler-label { font-family:var(--gb-font-display); font-size:11px; font-weight:800; letter-spacing:2.5px; color:rgba(255,255,255,0.78); background:rgba(0,0,0,0.45); padding:5px 14px; border-radius:14px; border:1px solid rgba(255,255,255,0.08); }
.pb-tumbler-label--result { color:#6ee7b7; background:rgba(16,185,129,0.22); border-color:rgba(16,185,129,0.4); }
.pb-tumbler-label--settling { color:#fcd34d; background:rgba(245,158,11,0.22); animation:pb-blink 0.5s infinite; }
.pb-tumbler-label.is-urgent { color:#fca5a5; background:rgba(239,68,68,0.28); animation:pb-blink 0.4s infinite; }

.pb-tumbler-chamber { position:relative; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(10,10,20,0.6) 30%, rgba(50,20,80,0.4) 100%); border:3px solid rgba(168,85,247,0.3); box-shadow:0 0 40px rgba(168,85,247,0.25), inset 0 0 50px rgba(0,0,0,0.7); overflow:hidden; }
.pb-tumbler-settling { animation:pb-tumbler-shake 0.18s infinite; }
@keyframes pb-tumbler-shake { 0%,100%{transform:rotate(0deg);} 25%{transform:rotate(-2deg);} 75%{transform:rotate(2deg);} }

.pb-tumbler-mini { position:absolute; top:50%; left:50%; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--gb-font-display); font-size:13px; font-weight:900; color:#fff; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-105px) rotate(calc(-1 * var(--angle))); animation:pb-tumbler-orbit 8s linear infinite, pb-tumbler-bob 1.2s ease-in-out infinite; animation-delay:var(--delay), var(--delay); box-shadow:inset -4px -4px 8px rgba(0,0,0,0.3); }
.pb-tumbler-mini--low { background:linear-gradient(135deg,#3b82f6,#1e40af); }
.pb-tumbler-mini--mid { background:linear-gradient(135deg,#a855f7,#6b21a8); }
.pb-tumbler-mini--high { background:linear-gradient(135deg,#f59e0b,#b45309); }
.pb-tumbler-mini--ultra { background:linear-gradient(135deg,#ef4444,#7f1d1d); }
@keyframes pb-tumbler-orbit { to { transform:translate(-50%,-50%) rotate(calc(var(--angle) + 360deg)) translateY(-105px) rotate(calc(-1 * var(--angle) - 360deg)); } }
@keyframes pb-tumbler-bob { 50% { translate:0 -4px; } }
.pb-tumbler-settling .pb-tumbler-mini { animation-duration:1.5s, 0.3s; }

.pb-tumbler-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5; }
.pb-tumbler-center.is-pop { animation:pb-ball-pop-mega 0.7s cubic-bezier(0.34,1.56,0.64,1); }
.pb-tumbler-ball { width:110px; height:110px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--gb-font-display); font-size:48px; font-weight:900; color:#fff; box-shadow:0 0 40px rgba(255,255,255,0.5), inset -10px -10px 20px rgba(0,0,0,0.3); }
.pb-tumbler-color-low { background:radial-gradient(circle at 30% 28%, #cffafe, #06b6d4 50%, #1e3a8a); }
.pb-tumbler-color-mid { background:radial-gradient(circle at 30% 28%, #fbcfe8, #a855f7 50%, #4c1d95); }
.pb-tumbler-color-high { background:radial-gradient(circle at 30% 28%, #fef3c7, #fbbf24 50%, #78350f); }
.pb-tumbler-color-ultra { background:radial-gradient(circle at 30% 28%, #fecaca, #ef4444 50%, #450a0a); }
.pb-tumbler-ring { position:absolute; inset:8px; border-radius:50%; border:1px dashed rgba(168,85,247,0.4); animation:pb-rainbow-spin 10s linear infinite; pointer-events:none; }

.pb-tumbler-sub, .pb-roulette-sub, .pb-crystal-sub, .pb-pinball-sub, .pb-disco-sub { font-size:11px; color:rgba(255,255,255,0.6); letter-spacing:1px; text-align:center; }
.pb-tumbler-sub b, .pb-roulette-sub b, .pb-crystal-sub b, .pb-pinball-sub b, .pb-disco-sub b { color:#c4b5fd; font-family:var(--gb-font-display); }

.pb-tumbler-recent, .pb-roulette-recent, .pb-crystal-recent, .pb-pinball-recent, .pb-disco-recent { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; max-width:340px; padding:0 12px; }
.pb-tumbler-empty { color:rgba(255,255,255,0.4); font-size:11px; }
.pb-tumbler-recent-ball, .pb-roulette-chip, .pb-crystal-orb-mini, .pb-pinball-recent-ball, .pb-disco-recent-ball { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; }

/* ═══════════════════════════════════════════════════════════════════════
   P6 — Roulette Wheel
   ═══════════════════════════════════════════════════════════════════════ */
.pb-roulette-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px 0 10px; }
.pb-roulette-label { font-family:var(--gb-font-display); font-size:11px; font-weight:800; letter-spacing:2.5px; color:rgba(255,255,255,0.78); background:rgba(0,0,0,0.45); padding:5px 14px; border-radius:14px; border:1px solid rgba(255,255,255,0.08); }
.pb-roulette-label--result { color:#6ee7b7; background:rgba(16,185,129,0.22); }
.pb-roulette-label--settling { color:#fcd34d; background:rgba(245,158,11,0.22); animation:pb-blink 0.5s infinite; }
.pb-roulette-label.is-urgent { color:#fca5a5; background:rgba(239,68,68,0.28); animation:pb-blink 0.4s infinite; }

.pb-roulette-wheel { position:relative; width:280px; height:280px; }
.pb-roulette-svg { width:100%; height:100%; transition:transform 0.8s cubic-bezier(0.25,1,0.5,1); }
.pb-roulette-phase-settling .pb-roulette-svg { animation:pb-rainbow-spin 1.5s linear infinite; }
.pb-roulette-phase-result .pb-roulette-svg { transform:rotate(0deg); }
.pb-roulette-wedge { stroke:rgba(255,255,255,0.15); stroke-width:1; }
.pb-roulette-w-low { fill:#1e40af; } .pb-roulette-w-mid { fill:#6b21a8; }
.pb-roulette-w-high { fill:#b45309; } .pb-roulette-w-ultra { fill:#7f1d1d; }

.pb-roulette-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80px; height:80px; border-radius:50%; background:#0a0a14; border:2px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,0.6); z-index:5; }
.pb-roulette-center.is-pop { animation:pb-ball-pop-mega 0.7s cubic-bezier(0.34,1.56,0.64,1); }
.pb-roulette-num { font-family:var(--gb-font-display); font-size:36px; font-weight:900; }
.pb-roulette-num--low { color:#93c5fd; text-shadow:0 0 12px #3b82f6; }
.pb-roulette-num--mid { color:#d8b4fe; text-shadow:0 0 12px #a855f7; }
.pb-roulette-num--high { color:#fcd34d; text-shadow:0 0 12px #f59e0b; }
.pb-roulette-num--ultra { color:#fca5a5; text-shadow:0 0 12px #ef4444; }

.pb-roulette-pointer { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:24px; color:#fbbf24; text-shadow:0 0 8px #f59e0b; z-index:10; }

/* ═══════════════════════════════════════════════════════════════════════
   P7 — Crystal Sphere
   ═══════════════════════════════════════════════════════════════════════ */
.pb-crystal-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px 0 10px; }
.pb-crystal-label { font-family:"Cinzel", serif; font-size:13px; font-weight:700; letter-spacing:2.5px; color:#e0e7ff; background:rgba(76,29,149,0.4); padding:6px 16px; border-radius:14px; border:1px solid rgba(167,139,250,0.4); text-shadow:0 0 8px rgba(167,139,250,0.7); }
.pb-crystal-label--result { color:#fcd34d; background:rgba(245,158,11,0.25); border-color:rgba(251,191,36,0.5); }
.pb-crystal-label--settling { animation:pb-crystal-pulse 1.5s ease-in-out infinite; }
.pb-crystal-label.is-urgent { color:#fca5a5; animation:pb-blink 0.5s infinite; }
@keyframes pb-crystal-pulse { 50%{opacity:0.5; text-shadow:0 0 16px rgba(255,255,255,0.9);} }

.pb-crystal-stage { position:relative; width:300px; height:300px; display:flex; align-items:center; justify-content:center; overflow:hidden; }

.pb-crystal-rays { position:absolute; inset:0; pointer-events:none; }
.pb-crystal-ray { position:absolute; top:50%; left:50%; width:200px; height:2px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transform-origin:0 0; transform:rotate(var(--rot)) translateX(-50%); animation:pb-crystal-ray-pulse 3s ease-in-out infinite; }
@keyframes pb-crystal-ray-pulse { 50%{opacity:0.3;} }
.pb-crystal-phase-settling .pb-crystal-rays { animation:pb-rainbow-spin 5s linear infinite; }

.pb-crystal-mist { position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(255,255,255,0.1) 0%, transparent 60%); animation:pb-crystal-mist-float 6s ease-in-out infinite; }
.pb-crystal-mist--2 { animation-delay:-3s; animation-duration:4s; }
@keyframes pb-crystal-mist-float { 50%{transform:translate(8px,-6px) scale(1.1);} }

.pb-crystal-orb { position:relative; z-index:5; }
.pb-crystal-orb.is-pop { animation:pb-ball-pop-mega 0.7s cubic-bezier(0.34,1.56,0.64,1); }
.pb-crystal-orb-shell { position:relative; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle at 30% 28%, rgba(255,255,255,0.7) 0%, rgba(186,230,253,0.5) 25%, rgba(99,102,241,0.4) 55%, rgba(76,29,149,0.85) 100%); box-shadow:0 0 60px rgba(167,139,250,0.6), inset -20px -20px 50px rgba(0,0,0,0.25); overflow:hidden; }
.pb-crystal-tone-low .pb-crystal-orb-shell { background:radial-gradient(circle at 30% 28%, rgba(255,255,255,0.7), rgba(186,230,253,0.6) 30%, rgba(6,182,212,0.5) 60%, rgba(30,58,138,0.85)); box-shadow:0 0 60px rgba(6,182,212,0.7), inset -20px -20px 50px rgba(0,0,0,0.25); }
.pb-crystal-tone-high .pb-crystal-orb-shell { background:radial-gradient(circle at 30% 28%, rgba(255,255,255,0.7), rgba(254,243,199,0.6) 30%, rgba(251,191,36,0.5) 60%, rgba(120,53,15,0.85)); box-shadow:0 0 60px rgba(251,191,36,0.7), inset -20px -20px 50px rgba(0,0,0,0.25); }
.pb-crystal-tone-ultra .pb-crystal-orb-shell { background:radial-gradient(circle at 30% 28%, rgba(255,255,255,0.7), rgba(254,202,202,0.6) 30%, rgba(239,68,68,0.6) 60%, rgba(69,10,10,0.85)); box-shadow:0 0 80px rgba(239,68,68,0.8), inset -20px -20px 50px rgba(0,0,0,0.25); }

.pb-crystal-orb-inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.pb-crystal-orb-num { font-family:"Cinzel", serif; font-size:60px; font-weight:900; color:#fff; text-shadow:0 0 20px rgba(255,255,255,0.8), 0 4px 12px rgba(0,0,0,0.7); }
.pb-crystal-orb-highlight { position:absolute; top:10%; left:18%; width:35%; height:30%; background:radial-gradient(ellipse, rgba(255,255,255,0.85) 0%, transparent 70%); filter:blur(6px); }
.pb-crystal-orb-shadow { position:absolute; bottom:5%; right:10%; width:40%; height:30%; background:radial-gradient(ellipse, rgba(0,0,0,0.4) 0%, transparent 70%); filter:blur(8px); }
.pb-crystal-orb-base { width:80px; height:20px; margin:-8px auto 0; background:linear-gradient(180deg, rgba(120,53,15,0.9), rgba(60,20,5,1)); border-radius:50% / 100% 100% 0 0; box-shadow:0 4px 14px rgba(0,0,0,0.5); }

.pb-crystal-star { position:absolute; top:var(--top); left:var(--left); color:#fef3c7; font-size:var(--size); text-shadow:0 0 6px #fbbf24; animation:pb-crystal-twinkle 2s ease-in-out infinite; animation-delay:var(--delay); }
@keyframes pb-crystal-twinkle { 0%,100%{opacity:0.2;} 50%{opacity:1;} }

/* ═══════════════════════════════════════════════════════════════════════
   P8 — Pinball Drop
   ═══════════════════════════════════════════════════════════════════════ */
.pb-pinball-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px 0 10px; }
.pb-pinball-label { font-family:"Orbitron", monospace; font-size:11px; font-weight:800; letter-spacing:2.5px; color:#67e8f9; background:#0a0a14; padding:5px 14px; border-radius:6px; border:1px solid rgba(14,165,233,0.4); text-shadow:0 0 8px rgba(14,165,233,0.5); }
.pb-pinball-label--result { color:#6ee7b7; border-color:rgba(74,222,128,0.5); }
.pb-pinball-label--settling { color:#fcd34d; animation:pb-blink 0.5s infinite; }
.pb-pinball-label.is-urgent { color:#fca5a5; animation:pb-blink 0.4s infinite; }

.pb-pinball-table { position:relative; width:300px; height:380px; background:linear-gradient(180deg, #0a0a14 0%, #1e1b4b 50%, #0a0a14 100%); border:3px solid #6366f1; border-radius:16px; overflow:hidden; box-shadow:inset 0 0 40px rgba(99,102,241,0.2), 0 8px 28px rgba(0,0,0,0.6); }

.pb-pinball-tens { position:absolute; top:14px; left:50%; transform:translateX(-50%); text-align:center; }
.pb-pinball-tens-label { font-family:"Orbitron", monospace; font-size:9px; font-weight:800; letter-spacing:2px; color:#94a3b8; }
.pb-pinball-tens-val { font-family:"Orbitron", monospace; font-size:42px; font-weight:900; line-height:1; margin-top:4px; }
.pb-pinball-tone-low { color:#67e8f9; text-shadow:0 0 14px #06b6d4; }
.pb-pinball-tone-mid { color:#d8b4fe; text-shadow:0 0 14px #a855f7; }
.pb-pinball-tone-high { color:#fcd34d; text-shadow:0 0 14px #f59e0b; }
.pb-pinball-tone-ultra { color:#fca5a5; text-shadow:0 0 14px #ef4444; }

.pb-pinball-pins { position:absolute; top:90px; left:0; right:0; display:flex; flex-direction:column; gap:30px; padding:0 30px; }
.pb-pinball-pin-row { display:flex; justify-content:space-around; }
.pb-pinball-pin-row-1 { padding:0 30px; }
.pb-pinball-pin { width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff, #94a3b8); box-shadow:0 0 6px rgba(255,255,255,0.5); }

.pb-pinball-ball { position:absolute; top:50px; left:50%; width:18px; height:18px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff, #94a3b8); box-shadow:0 0 12px #fff; font-size:0; opacity:0.95; z-index:5; }
.pb-pinball-ball.is-dropping { animation:pb-pinball-drop 1.8s ease-in infinite; }
.pb-pinball-ball.is-landed { top:330px; left:calc(20px + var(--target) * 28px); transition:top 0.6s, left 0.8s; }
@keyframes pb-pinball-drop { 0%{top:50px; transform:translateX(-50%);} 25%{top:130px; transform:translateX(-80%);} 50%{top:220px; transform:translateX(20%);} 75%{top:280px; transform:translateX(-30%);} 100%{top:320px; transform:translateX(-50%);} }

.pb-pinball-slots { position:absolute; bottom:14px; left:14px; right:14px; display:flex; gap:2px; height:36px; }
.pb-pinball-slot { flex:1; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:6px; color:#94a3b8; font-family:"Orbitron",monospace; font-size:14px; font-weight:800; }
.pb-pinball-slot.is-winner { background:linear-gradient(180deg, #fbbf24, #f59e0b); color:#000; box-shadow:0 0 20px rgba(251,191,36,0.6); animation:pb-blink 0.4s 4; }

.pb-pinball-result-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); z-index:20; }
.pb-pinball-result-overlay.is-pop { animation:pb-ball-pop-mega 0.7s cubic-bezier(0.34,1.56,0.64,1); }
.pb-pinball-result-num { font-family:"Orbitron",monospace; font-size:120px; font-weight:900; line-height:1; }

/* ═══════════════════════════════════════════════════════════════════════
   P9 — Disco Cyber (디스코 볼)
   ═══════════════════════════════════════════════════════════════════════ */
.pb-disco-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; padding:14px 0 10px; }
.pb-disco-label { font-family:var(--gb-font-display); font-size:11px; font-weight:800; letter-spacing:2.5px; color:#fff; background:linear-gradient(90deg,#f87171,#fbbf24,#4ade80,#06b6d4,#a855f7,#ec4899); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-size:200% 100%; animation:pb-disco-grad 3s linear infinite; padding:5px 14px; border-radius:14px; border:1px solid rgba(168,85,247,0.4); }
@keyframes pb-disco-grad { to { background-position:200% 0; } }
.pb-disco-label--settling { animation:pb-disco-grad 1s linear infinite; }
.pb-disco-label.is-urgent { animation:pb-disco-grad 0.5s linear infinite; }

.pb-disco-stage { position:relative; width:300px; height:320px; display:flex; align-items:center; justify-content:center; overflow:hidden; }

.pb-disco-rays-bg { position:absolute; inset:0; pointer-events:none; }
.pb-disco-ray { position:absolute; top:50%; left:50%; width:300px; height:3px; transform-origin:0 50%; transform:rotate(calc(var(--ri) * 22.5deg)) translateY(-50%); background:linear-gradient(90deg, transparent, hsl(calc(var(--ri) * 40), 80%, 60%) 30%, transparent); animation:pb-disco-ray-glow 2s ease-in-out infinite; animation-delay:calc(var(--ri) * -0.1s); opacity:0.6; }
@keyframes pb-disco-ray-glow { 50% { opacity:0.2; } }
.pb-disco-phase-settling .pb-disco-rays-bg { animation:pb-rainbow-spin 2s linear infinite; }

.pb-disco-sparkle { position:absolute; top:var(--top); left:var(--left); color:var(--color); font-size:14px; text-shadow:0 0 8px currentColor; animation:pb-disco-sparkle 1.5s ease-in-out infinite; animation-delay:var(--delay); pointer-events:none; }
@keyframes pb-disco-sparkle { 0%,100%{opacity:0.1; transform:scale(0.5);} 50%{opacity:1; transform:scale(1.3);} }

.pb-disco-string { position:absolute; top:0; left:50%; width:2px; height:40px; background:linear-gradient(180deg, rgba(255,255,255,0.6), transparent); }
.pb-disco-ball { position:relative; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle at 30% 28%, #fff 0%, #cbd5e1 30%, #475569 100%); box-shadow:0 0 60px rgba(255,255,255,0.5), inset -20px -20px 40px rgba(0,0,0,0.4); overflow:hidden; animation:pb-disco-rotate 5s linear infinite; }
@keyframes pb-disco-rotate { to { transform:rotate(360deg); } }
.pb-disco-phase-settling .pb-disco-ball { animation:pb-disco-rotate 1s linear infinite; }
.pb-disco-ball.is-pop { animation:pb-ball-pop-mega 0.7s cubic-bezier(0.34,1.56,0.64,1), pb-disco-rotate 5s linear infinite; }

.pb-disco-mirror-grid { position:absolute; inset:0; }
.pb-disco-mirror { position:absolute; width:32px; height:24px; background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(99,102,241,0.5)); border:1px solid rgba(255,255,255,0.4); top:calc(50% + sin(calc(var(--mi) * 12deg)) * 80px - 12px); left:calc(50% + cos(calc(var(--mi) * 12deg)) * 80px - 16px); opacity:0.7; animation:pb-disco-mirror-twinkle 1.5s ease-in-out infinite; animation-delay:calc(var(--mi) * -0.05s); }
@keyframes pb-disco-mirror-twinkle { 50% { opacity:1; filter:hue-rotate(120deg); } }

.pb-disco-num { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--gb-font-display); font-size:80px; font-weight:900; color:#fff; text-shadow:0 0 16px #fff, 0 0 32px currentColor; z-index:10; }
.pb-disco-tone-low { color:#67e8f9; }
.pb-disco-tone-mid { color:#d8b4fe; }
.pb-disco-tone-high { color:#fcd34d; }
.pb-disco-tone-ultra { color:#fca5a5; }

/* [2026-07-06] cache-bust: CF cached a 404 on prior CSS hash during a deploy-window gap; new hash bypasses poisoned edge cache */

:root{--gb-cachebust:20260706;}

/* ══ Binance-style Index Chart (2026-07-07: 바이낸스 뷰 그대로 + 우리 인덱스 실데이터) ══ */
.bic-wrap { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.bic-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bic-title { display: flex; align-items: baseline; gap: 8px; }
.bic-pair { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: 0.5px; }
.bic-tag { font-size: 9px; font-weight: 700; color: #c4b5fd; background: rgba(168,85,247,0.16); padding: 2px 6px; border-radius: 5px; }
.bic-price { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bic-price.up { color: #22c55e; }
.bic-price.down { color: #ef4444; }
.bic-utc { font-size: 9px; font-weight: 700; color: #94a3b8; background: rgba(148,163,184,0.14); padding: 2px 6px; border-radius: 5px; letter-spacing: 0.5px; }
.bic-tfs { display: flex; gap: 3px; }
.bic-tf {
  font-size: 11px; font-weight: 700; color: #94a3b8;
  padding: 3px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; background: rgba(255,255,255,0.04);
}
.bic-tf.active { color: #fff; background: rgba(240,185,11,0.18); border-color: rgba(240,185,11,0.4); }
.bic-tf:not(.active):hover { color: #cbd5e1; }
.bic-canvas { width: 100%; }
.bic-source-link {
  align-self: flex-end; margin-top: 4px;
  padding: 3px 8px; border: 1px solid rgba(240,185,11,0.35); border-radius: 6px;
  background: rgba(240,185,11,0.08); color: #F0B90B; font-size: 9px;
  text-decoration: none; white-space: nowrap;
}
.bic-fill { position: absolute; inset: 0; z-index: 1; height: 100%; }
.bic-fill .bic-canvas { width: 100%; height: 100%; }

/* [2026-07-13] 배틀 위로 화살표 (scroll-to-top) — 스크롤 내리면 나타나 맨 위 베팅영역으로 */
.bp-scrolltop {
  position: fixed;
  right: 16px;
  bottom: 96px;
  z-index: 60;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(124, 58, 237, 0.55);
  border-radius: 50%;
  background: rgba(15, 12, 30, 0.82);
  color: #c4b5fd;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 14px rgba(124, 58, 237, 0.35);
  cursor: pointer;
  animation: bpScrollTopIn 0.2s ease;
}
.bp-scrolltop:active { transform: scale(0.92); }
@keyframes bpScrollTopIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* [2026-07-15 #23] 배틀 로드맵(구슬판) 보드 */
.bp-roadmap {
  margin: 8px 12px 4px;
  padding: 8px 10px 10px;
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 12px;
  background: rgba(10, 10, 22, 0.6);
}
.bp-roadmap__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.bp-roadmap__title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  color: #c4b5fd; text-transform: uppercase;
}
.bp-roadmap__legend { display: flex; gap: 10px; font-size: 10px; font-weight: 700; }
.bp-roadmap__sub {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4); margin: 8px 0 3px; text-transform: uppercase;
}
.bp-roadmap__empty { padding: 16px; text-align: center; font-size: 11px; color: rgba(255, 255, 255, 0.4); }
.bp-roadmap__note { font-size: 8px; font-weight: 600; color: rgba(255, 255, 255, 0.45); letter-spacing: 0; text-transform: none; margin-left: 6px; }
.bp-roadmap__droad { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.bp-roadmap__dlabel { flex: 0 0 auto; width: 14px; font-size: 11px; color: rgba(255, 255, 255, 0.5); text-align: center; }
.bp-roadmap__droad > div { flex: 1 1 auto; min-width: 0; }
.bp-roadmap__ask { display: flex; gap: 8px; margin-top: 8px; }
.bp-roadmap__askbtn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px; border: 1px solid; border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.bp-roadmap__askdot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid; box-sizing: border-box;
}