/* =========================================================
   FLAPPY BIRD: SKIN & SHOP MODAL (HANDCRAFTED ARCADE THEME)
   ========================================================= */

.coin-hud{margin:5px auto 0;width:max-content;padding:5px 12px;border-radius:99px;background:rgba(9,20,39,0.85);color:#fef08a;border:1.5px solid #facc15;font-size:11px;font-weight:900;letter-spacing:1px;box-shadow:0 3px 8px rgba(0,0,0,0.4)}
.coin-hud b,.home-wallet b,.shop-balance b{color:#facc15;font-size:1.25em}
.home-wallet{margin-top:7px;padding:7px 13px;border-radius:99px;background:rgba(9,20,39,0.85);border:1.5px solid #facc15;color:#fef08a;font-size:12px;font-weight:900;letter-spacing:1px;box-shadow:0 3px 8px rgba(0,0,0,0.4)}

.shop-modal{position:relative;padding:10px 14px 8px !important;width:min(560px,94vw) !important;height:min(340px,94vh) !important;max-height:min(340px,94vh) !important;box-sizing:border-box;overflow:hidden !important;border:2px solid #254a78 !important;border-radius:18px;background:linear-gradient(180deg,#142442 0%,#0c172c 100%) !important;color:#f1f5f9;box-shadow:0 18px 45px rgba(0,0,0,0.65),inset 0 1.5px 0 rgba(255,255,255,0.15)}
.shop-modal.hidden{display:none !important}
.shop-modal:not(.hidden){display:flex !important;flex-direction:column !important}
.shop-modal .close {
  top: 8px !important;
  right: 8px !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.shop-modal .close:hover {
  background: #ef4444 !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
}
.shop-modal .close:active {
  transform: scale(0.95) !important;
}
.shop-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
  padding: 0 2px !important;
  margin-right: 28px !important;
}
.shop-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;padding:0 2px}
.shop-modal h2{margin:0;font:900 15px 'Trebuchet MS',Arial,sans-serif;color:#ffffff;letter-spacing:0.3px;text-shadow:0 1px 3px rgba(0,0,0,0.6)}
.shop-coins{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:linear-gradient(180deg,rgba(245,158,11,0.25) 0%,rgba(217,119,6,0.2) 100%);border:1.5px solid #facc15;border-radius:99px;padding:3px 10px;box-shadow:0 2px 6px rgba(0,0,0,0.3);color:#fef08a;font:900 11px/1 'Trebuchet MS',Arial,sans-serif;letter-spacing:0.3px}
.shop-coins span{font:900 12px/1 'Trebuchet MS',Arial,sans-serif;color:#facc15}

.shop-showcase-stage{position:relative;width:220px !important;height:75px !important;margin:0 auto 4px !important;border-radius:12px;overflow:hidden;border:2px solid #2563eb;box-shadow:inset 0 2px 8px rgba(0,0,0,0.5),0 3px 8px rgba(0,0,0,0.3);background:radial-gradient(circle at 50% 30%,#173663 0%,#0b1c36 100%);flex-shrink:0}
.shop-showcase-stage canvas{display:block;width:220px !important;height:75px !important}

.shop-tabs-wrapper{display:flex;align-items:center;gap:4px;position:relative;margin-bottom:4px;width:100%;flex-shrink:0}
.tab-arrow{flex-shrink:0;width:22px;height:24px;border:none;border-radius:6px;background:#091427;border:1.5px solid #1c355a;color:#38bdf8;font:900 13px Arial;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0}
.tab-arrow:hover{background:#182c4e;color:#fff;transform:scale(1.05)}
.tab-arrow:active{transform:scale(0.92)}

.skin-list{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 6px;flex:1 1 auto;min-height:0;max-height:160px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 4px 6px;scrollbar-width:thin;scrollbar-color:#254a78 transparent}
.skin-list::-webkit-scrollbar{width:4px}
.skin-list::-webkit-scrollbar-track{background:#091427;border-radius:10px}
.skin-list::-webkit-scrollbar-thumb{background:#254a78;border-radius:10px}

.skin-card{padding:5px 4px 5px;border:1.5px solid #254b7a;border-radius:10px;background:linear-gradient(180deg,#182c4e 0%,#12213d 100%);color:#f1f5f9;font:900 9px Trebuchet MS,Arial;letter-spacing:.2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;min-height:96px;position:relative;transition:all .18s cubic-bezier(0.34,1.56,0.64,1);touch-action:manipulation;box-sizing:border-box;box-shadow:0 3px 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.06)}
.skin-card:hover{border-color:#38bdf8;transform:translateY(-1.5px);box-shadow:0 4px 12px rgba(56,189,248,0.25)}
.skin-card.previewing{border-color:#38bdf8;background:linear-gradient(180deg,#1e3e6b 0%,#122846 100%);box-shadow:0 0 0 1.5px #38bdf8,0 4px 14px rgba(56,189,248,0.35)}
.skin-card.selected{border-color:#facc15;background:linear-gradient(180deg,#3b2d14 0%,#1c1709 100%);box-shadow:0 0 0 1.5px #facc15,0 4px 14px rgba(250,204,21,0.35)}
.skin-card.locked{opacity:.92}
.skin-card.locked:hover{opacity:1}

.rarity-badge{position:absolute;top:4px;left:5px;font:900 7px/1 Arial,sans-serif;padding:1px 5px;border-radius:4px;letter-spacing:0.4px;text-transform:uppercase;z-index:2}
.rarity-badge.rarity-common{background:rgba(148,163,184,0.2);color:#cbd5e1;border:1px solid rgba(148,163,184,0.4)}
.rarity-badge.rarity-rare{background:rgba(56,189,248,0.25);color:#7dd3fc;border:1px solid #38bdf8}
.rarity-badge.rarity-epic{background:rgba(168,85,247,0.25);color:#d8b4fe;border:1px solid #c084fc}
.rarity-badge.rarity-legendary{background:rgba(245,158,11,0.25);color:#fef08a;border:1px solid #facc15}
.rarity-badge.rarity-mythic{background:linear-gradient(135deg,#ec4899,#8b5cf6);color:#fff;box-shadow:0 1px 6px rgba(236,72,153,0.5)}

.skin-name{font-size:9.5px;font-weight:900;margin:2px 0 1px;color:#ffffff;text-align:center;line-height:1.2;white-space:normal;word-break:break-word;max-width:100%}
.skin-desc{font-size:7.5px;font-weight:600;color:#93c5fd;margin:0 0 4px;text-align:center;line-height:1.2;white-space:normal;word-break:break-word;max-width:100%;flex-grow:1}

.skin-preview{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 auto 2px;border-radius:8px;position:relative;background:#091427;border:1.5px solid #204470;box-shadow:inset 0 1px 4px rgba(0,0,0,0.5);flex-shrink:0;overflow:hidden}
.shop-item-svg{display:block;width:24px;height:24px;transition:transform .18s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))}
.skin-card:hover .shop-item-svg{display:block;width:24px;height:24px;transition:transform .18s ease;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5))}

.modal .skin-cost,
.skin-cost{display:inline-flex !important;align-items:center !important;justify-content:center !important;margin:auto auto 0 auto !important;width:calc(100% - 4px) !important;max-width:100px !important;min-height:20px !important;height:20px !important;padding:0 6px !important;font:900 8.5px/1 Trebuchet MS,Arial !important;letter-spacing:.2px !important;color:#052e16 !important;background:#86efac !important;border:1px solid #4ade80 !important;border-radius:99px !important;box-sizing:border-box !important;flex-shrink:0 !important;box-shadow:0 2px 4px rgba(0,0,0,0.25) !important}
.skin-cost.equipped{color:#052e16 !important;background:#86efac !important;font-weight:900 !important}

.modal .skin-cost-btn,
.skin-cost-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:3px !important;margin:auto auto 0 auto !important;width:calc(100% - 4px) !important;max-width:100px !important;min-height:22px !important;height:22px !important;padding:0 6px !important;font:900 9px/1 Trebuchet MS,Arial !important;letter-spacing:.2px !important;border-radius:99px !important;cursor:pointer !important;transition:all .15s ease !important;box-sizing:border-box !important;flex-shrink:0 !important}
.skin-cost-btn:hover{filter:brightness(1.15) !important;transform:scale(1.03) !important}
.skin-cost-btn:active{transform:translateY(1px) scale(0.96) !important}

.modal .skin-cost-btn.use-btn,
.skin-cost-btn.use-btn{background:linear-gradient(180deg,#0284c7 0%,#0369a1 100%) !important;border:1px solid #38bdf8 !important;box-shadow:0 2px 0 #075985 !important;color:#fff !important}
.modal .skin-cost-btn.buy-btn,
.skin-cost-btn.buy-btn{background:linear-gradient(180deg,#22c55e 0%,#16a34a 100%) !important;border:1px solid #4ade80 !important;box-shadow:0 2px 0 #166534 !important;color:#fff !important}
.modal .skin-cost-btn.buy-btn.cant-afford,
.skin-cost-btn.buy-btn.cant-afford{background:linear-gradient(180deg,#ef4444 0%,#dc2626 100%) !important;border:1px solid #f87171 !important;box-shadow:0 2px 0 #991b1b !important;color:#fff !important}
.mini-coin-svg{flex-shrink:0;vertical-align:middle}

@keyframes coinShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px);color:#ef4444}40%,80%{transform:translateX(5px);color:#ef4444}}
.coin-shake{animation:coinShake 0.45s ease-in-out}



/* =========================================================
   MASTERCLASS SHOP CARD & LIVE BANNER STYLES
   Clean Front + Dedicated Live Banner + RPG Card Back
   ========================================================= */

.shop-item-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(9, 20, 39, 0.9) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  margin: 0 auto 4px !important;
  width: min(440px, 92%) !important;
  min-height: 20px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  flex-shrink: 0 !important;
}

.banner-title {
  font: 900 8.5px/1 'Trebuchet MS', Arial, sans-serif !important;
  color: #facc15 !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
}

.banner-desc {
  font: 600 8px/1.2 'Trebuchet MS', Arial, sans-serif !important;
  color: #fef08a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Card Wrap (Perspective Container) */
.skin-card-wrap {
  perspective: 900px !important;
  position: relative !important;
  min-height: 112px !important;
  height: 112px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.skin-card-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.85, 0.25, 1) !important;
  transform-style: preserve-3d !important;
}

.skin-card-wrap.flipped .skin-card-inner {
  transform: rotateY(180deg) !important;
}

.skin-card-front, .skin-card-back {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

/* Front Face */
.skin-card-front {
  padding: 5px 6px 5px !important;
  z-index: 2 !important;
  transform: rotateY(0deg) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
}

/* Tanda Seru Button (Exclamation Mark Logo) */
.card-exclamation-btn {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1.5px solid #facc15 !important;
  color: #facc15 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.15s ease !important;
}

.card-exclamation-btn svg {
  pointer-events: none !important;
}

.card-exclamation-btn:hover {
  background: #facc15 !important;
  color: #0f172a !important;
  transform: scale(1.15) !important;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.5) !important;
}

/* Back Face: High-Detail Indie RPG Card Back */
.skin-card-back {
  transform: rotateY(180deg) !important;
  background: radial-gradient(circle at center, #1b2f52 0%, #0d192f 100%) !important;
  border: 1.5px solid #facc15 !important;
  padding: 6px 7px 5px !important;
  color: #f1f5f9 !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 12px rgba(250, 204, 21, 0.2), 0 4px 14px rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.card-back-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  border-bottom: 1px solid rgba(250, 204, 21, 0.3) !important;
  padding-bottom: 2px !important;
}

.card-back-title {
  font: 900 8.5px/1 'Trebuchet MS', Arial, sans-serif !important;
  color: #facc15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 80% !important;
}

.card-back-close-btn {
  background: rgba(239, 68, 68, 0.2) !important;
  border: 1px solid #ef4444 !important;
  border-radius: 4px !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  flex-shrink: 0 !important;
  color: #fca5a5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
}

.card-back-close-btn:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

.card-back-badge {
  font: 900 6.5px/1 'Trebuchet MS', Arial, sans-serif !important;
  color: #38bdf8 !important;
  letter-spacing: 0.4px !important;
  margin-top: 3px !important;
  text-align: left !important;
}

.card-back-desc-box {
  background: rgba(9, 20, 39, 0.75) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 6px !important;
  padding: 4px 5px !important;
  margin: 3px 0 !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #38bdf8 transparent !important;
}

.card-back-desc-text {
  font: 600 7.5px/1.3 'Trebuchet MS', Arial, sans-serif !important;
  color: #e2e8f0 !important;
  margin: 0 !important;
  text-align: left !important;
}

.card-back-flip-hint {
  font: 800 6px/1 'Trebuchet MS', Arial, sans-serif !important;
  color: #94a3b8 !important;
  text-align: center !important;
  letter-spacing: 0.2px !important;
  flex-shrink: 0 !important;
}