/* Lucky wheel + chat skin shop — ZSH Hub */
.hub-wheel-feature {
  width: 100%; text-align: left; margin-bottom: 1.5rem; padding: 1.25rem 1.4rem;
  border: 1px solid rgba(184,240,255,0.45); cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, rgba(56,189,248,0.14), rgba(168,85,247,0.22), rgba(251,191,36,0.12));
  position: relative; overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.hub-wheel-feature::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.14) 50%, transparent 62%);
  transform: translateX(-100%); animation: wheelFeatureShine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wheelFeatureShine { 0%, 72% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.hub-wheel-feature:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 32px rgba(56,189,248,0.28), 0 10px 36px rgba(168,85,247,0.22);
  border-color: rgba(184,240,255,0.7);
}
.hub-wheel-feature.hub-pressed, .hub-wheel-feature:active {
  transform: translateY(2px) scale(0.98); box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.hub-wheel-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; z-index: 1; }
.hub-wheel-kicker { font-size: 0.55rem; letter-spacing: 0.2em; color: #fde68a; display: block; margin-bottom: 0.35rem; }
.hub-wheel-title { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.3rem; color: var(--text); }
.hub-wheel-desc { font-size: 0.65rem; color: var(--muted); margin: 0; line-height: 1.45; max-width: 420px; }
.hub-wheel-icon {
  font-size: 2.5rem; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(184,240,255,0.55));
  animation: wheelIconSpin 8s linear infinite;
}
@keyframes wheelIconSpin { to { transform: rotate(360deg); } }

.hub-pc-feature {
  width: 100%; text-align: left; margin-bottom: 1.5rem; padding: 1.25rem 1.4rem;
  border: 1px solid rgba(0, 242, 255, 0.35); cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, rgba(0, 242, 255, 0.1), rgba(0, 120, 200, 0.18), rgba(0, 60, 100, 0.12));
  position: relative; overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.hub-pc-feature::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(0, 242, 255, 0.12) 50%, transparent 62%);
  transform: translateX(-100%); animation: wheelFeatureShine 5s ease-in-out infinite;
  pointer-events: none;
}
.hub-pc-feature:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 0 32px rgba(0, 242, 255, 0.22), 0 10px 36px rgba(0, 120, 200, 0.18);
  border-color: rgba(0, 242, 255, 0.65);
}
.hub-pc-feature.hub-pressed, .hub-pc-feature:active {
  transform: translateY(2px) scale(0.98); box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.hub-pc-icon {
  font-size: 2.5rem; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(0, 242, 255, 0.45));
  animation: pcIconPulse 3s ease-in-out infinite;
}
@keyframes pcIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.wheel-modal-card { max-width: 420px; width: 94%; padding: 1.5rem 1.25rem 1.25rem; }
.wheel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; }
.wheel-head h2 { margin: 0; font-size: 1.1rem; color: #b8f0ff; letter-spacing: 0.08em; }
.wheel-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.wheel-badge {
  font-size: 0.62rem; font-weight: 800; padding: 0.35rem 0.65rem; border-radius: 999px;
  border: 1px solid rgba(184,240,255,0.35); background: rgba(0,0,0,0.35); color: #e2f8ff;
}
.wheel-badge.diamond { border-color: rgba(184,240,255,0.55); color: #b8f0ff; }
.wheel-badge.coin { border-color: rgba(251,191,36,0.45); color: #fde68a; }
.wheel-stage-wrap { position: relative; width: min(100%, 320px); margin: 0 auto 1rem; aspect-ratio: 1; }
#wheelCanvas { width: 100%; height: 100%; display: block; border-radius: 50%; filter: drop-shadow(0 12px 28px rgba(0,0,0,0.45)); }
.wheel-pointer {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 22px solid #fde047; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  z-index: 3;
}
.wheel-center-cap {
  position: absolute; inset: 0; margin: auto; width: 18%; height: 18%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #fde047 35%, #f59e0b 100%);
  border: 3px solid rgba(255,255,255,0.85); box-shadow: 0 0 18px rgba(251,191,36,0.5);
  z-index: 2; pointer-events: none;
}
.wheel-actions { display: flex; flex-direction: column; gap: 0.55rem; }
.wheel-btn {
  width: 100%; min-height: 48px; padding: 0.75rem 1rem; border: none; border-radius: 14px;
  font-family: inherit; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.04em; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.wheel-btn-primary {
  background: linear-gradient(135deg, #22d3ee, #a855f7); color: #fff;
  box-shadow: 0 4px 0 #6d28d9, 0 0 20px rgba(168,85,247,0.25);
}
.wheel-btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); }
.wheel-btn-primary.hub-pressed, .wheel-btn-primary:active { transform: translateY(2px); box-shadow: none; }
.wheel-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.wheel-btn-secondary {
  background: rgba(255,255,255,0.08); color: var(--text); border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 0 rgba(0,0,0,0.25);
}
.wheel-btn-secondary:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.wheel-btn-secondary.hub-pressed, .wheel-btn-secondary:active { transform: translateY(2px); box-shadow: none; }
.wheel-btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
.wheel-sub { font-size: 0.62rem; color: var(--muted); text-align: center; margin: 0.35rem 0 0; line-height: 1.45; }
.wheel-result {
  margin-top: 0.75rem; padding: 0.75rem 0.9rem; border-radius: 14px; text-align: center;
  font-size: 0.78rem; font-weight: 700; display: none;
  border: 1px solid rgba(184,240,255,0.35); background: rgba(56,189,248,0.12);
}
.wheel-result.show { display: block; animation: wheelPop 0.45s ease; }
.wheel-result.bad { border-color: rgba(248,113,113,0.45); background: rgba(248,113,113,0.12); color: #fecaca; }
.wheel-result.good { color: #e0f2fe; }
.wheel-result.jackpot { border-color: rgba(253,224,71,0.55); background: rgba(253,224,71,0.12); color: #fef08a; }
@keyframes wheelPop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.skin-shop-card { max-width: 520px; width: 94%; }
.skin-shop-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.skin-shop-head h2 { margin: 0; color: #c4b5fd; font-size: 1.05rem; }
.skin-shop-diamonds { font-size: 0.72rem; font-weight: 800; color: #b8f0ff; }
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; max-height: 52vh; overflow-y: auto; padding: 0.15rem; }
.skin-card {
  border-radius: 16px; padding: 0.85rem 0.75rem; text-align: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  font-family: inherit; color: var(--text);
}
.skin-card:hover { transform: translateY(-3px); border-color: rgba(196,181,253,0.45); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.skin-card.hub-pressed { transform: translateY(1px) scale(0.98); }
.skin-card.owned { border-color: rgba(74,222,128,0.45); }
.skin-card.equipped { box-shadow: 0 0 0 2px rgba(253,224,71,0.55), 0 8px 24px rgba(251,191,36,0.15); }
.skin-preview {
  margin: 0 auto 0.55rem; max-width: 100%; padding: 0.45rem 0.55rem; border-radius: 12px;
  font-size: 0.68rem; font-weight: 700; line-height: 1.35;
}
.skin-preview.skin-aurora { background: linear-gradient(135deg, rgba(103,232,249,0.25), rgba(168,85,247,0.2)); border: 1px solid rgba(103,232,249,0.45); color: #67e8f9; }
.skin-preview.skin-rose { background: linear-gradient(135deg, rgba(251,113,133,0.22), rgba(244,63,94,0.15)); border: 1px solid rgba(251,113,133,0.45); color: #fb7185; }
.skin-preview.skin-neon { background: linear-gradient(135deg, rgba(192,132,252,0.22), rgba(124,58,237,0.18)); border: 1px solid rgba(192,132,252,0.45); color: #c084fc; }
.skin-preview.skin-jade { background: linear-gradient(135deg, rgba(74,222,128,0.2), rgba(16,185,129,0.15)); border: 1px solid rgba(74,222,128,0.45); color: #4ade80; }
.skin-preview.skin-ice { background: linear-gradient(135deg, rgba(184,240,255,0.25), rgba(56,189,248,0.15)); border: 1px solid rgba(184,240,255,0.5); color: #b8f0ff; }
.skin-preview.skin-gold { background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(245,158,11,0.18)); border: 1px solid rgba(251,191,36,0.5); color: #fbbf24; }
.skin-preview.skin-ember { background: linear-gradient(135deg, rgba(249,115,22,0.25), rgba(239,68,68,0.18)); border: 1px solid rgba(249,115,22,0.5); color: #f97316; }
.skin-preview.skin-void { background: linear-gradient(135deg, rgba(232,121,249,0.22), rgba(109,40,217,0.2)); border: 1px solid rgba(232,121,249,0.45); color: #e879f9; }
.skin-name { font-size: 0.72rem; font-weight: 800; margin-bottom: 0.25rem; }
.skin-price { font-size: 0.62rem; color: #b8f0ff; font-weight: 700; }
.skin-tag { font-size: 0.55rem; margin-top: 0.25rem; color: #86efac; font-weight: 700; }
.skin-shop-foot { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }

.talk-bubble.skin-aurora.mine { background: linear-gradient(135deg, rgba(103,232,249,0.12), rgba(168,85,247,0.1)); border-color: rgba(103,232,249,0.35) !important; }
.talk-bubble.skin-rose.mine { background: linear-gradient(135deg, rgba(251,113,133,0.12), rgba(244,63,94,0.08)); border-color: rgba(251,113,133,0.35) !important; }
.talk-bubble.skin-neon.mine { background: linear-gradient(135deg, rgba(192,132,252,0.12), rgba(124,58,237,0.1)); border-color: rgba(192,132,252,0.35) !important; }
.talk-bubble.skin-jade.mine { background: linear-gradient(135deg, rgba(74,222,128,0.1), rgba(16,185,129,0.08)); border-color: rgba(74,222,128,0.35) !important; }
.talk-bubble.skin-ice.mine { background: linear-gradient(135deg, rgba(184,240,255,0.14), rgba(56,189,248,0.08)); border-color: rgba(184,240,255,0.4) !important; }
.talk-bubble.skin-gold.mine { background: linear-gradient(135deg, rgba(251,191,36,0.14), rgba(245,158,11,0.1)); border-color: rgba(251,191,36,0.4) !important; }
.talk-bubble.skin-ember.mine { background: linear-gradient(135deg, rgba(249,115,22,0.12), rgba(239,68,68,0.08)); border-color: rgba(249,115,22,0.38) !important; }
.talk-bubble.skin-void.mine { background: linear-gradient(135deg, rgba(232,121,249,0.12), rgba(109,40,217,0.1)); border-color: rgba(232,121,249,0.38) !important; }

.my-diamond-line { font-size: 0.78rem; margin: 0.5rem 0 0.75rem; color: #b8f0ff; font-weight: 700; }