:root{ --mhcc-bg:#0b0f14; --mhcc-card:#0f1620; --mhcc-text:#e7f4ff; --mhcc-neon:#31ff7a; }
body.mhcc{ background:var(--mhcc-bg); color:var(--mhcc-text); }
.mhcc-header.sticky{ position:sticky; top:0; z-index:3; background:linear-gradient(180deg, rgba(255,255,255,.05), transparent); backdrop-filter: blur(4px); border-bottom:1px solid rgba(255,255,255,.06); }
.mhcc-title{ font-size:20px; font-weight:700; text-shadow:0 0 10px var(--mhcc-neon); padding:10px 0; }
.mhcc-profilebar{ display:flex; gap:12px; align-items:center; padding:8px 0 12px; }
.mhcc-avatar img{ image-rendering:pixelated; border-radius:10px; transition: box-shadow .2s ease; }
.mhcc-info input{ width:220px; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:#061018; color:var(--mhcc-text); }
.mhcc-currencies span{ margin-right:10px; }
.mhcc-btn{ padding:8px 12px; border:none; border-radius:10px; background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); color:var(--mhcc-text); cursor:pointer; box-shadow:0 0 10px var(--mhcc-neon); transition: transform .08s ease; }
.mhcc-btn:active{ transform: scale(0.98); }

.mhcc-section{ padding:18px 0; }
.mhcc-games-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:12px; }
.mhcc-game{ background:var(--mhcc-card); border-radius:14px; padding:12px; box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.4); position:relative; }
.mhcc-area{ background:#05080d; border:1px dashed rgba(255,255,255,.08); border-radius:12px; min-height:120px; margin-top:8px; position:relative; overflow:hidden; }

/* Particles overlay (always on top) */
.mhcc-particles{ position:fixed; left:0; top:0; width:100vw; height:100vh; pointer-events:none; z-index:9999; }

/* Mobile controls */
.mhcc-mobile-controls{ display:flex; justify-content:space-between; gap:8px; margin:8px 0; }
@media (min-width: 800px){ .mhcc-mobile-controls{ display:none; } }

/* Shop */
.mhcc-shop-toolbar{ display:flex; gap:8px; margin-bottom:10px; }
.mhcc-shop-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; }
.mhcc-card{ background:var(--mhcc-card); border-radius:14px; padding:12px; box-shadow:0 0 0 1px rgba(255,255,255,.05); position:relative; }
.mhcc-badge{ position:absolute; top:10px; right:10px; padding:2px 8px; border-radius:999px; font-size:12px; }
.mhcc-badge.common{ background:#6b7280; } .mhcc-badge.rare{ background:#3b82f6; } .mhcc-badge.epic{ background:#a855f7; } .mhcc-badge.legendary{ background:#f59e0b; }
.mhcc-badge.premium{ background:#00e6ff; color:#003a46; font-weight:700; }
.mhcc-card.gems{ box-shadow:0 0 12px rgba(0,230,255,.45), 0 0 30px rgba(0,230,255,.2) inset; border:1px solid rgba(0,230,255,.25); }
.mhcc-card.gems:hover{ transform: scale(1.03); }
.mhcc-card.active{ box-shadow:0 0 0 2px var(--mhcc-neon), 0 0 20px rgba(49,255,122,.3) inset; }
.mhcc-card .mhcc-item-state{ font-size:12px; opacity:.9; margin-top:6px; }
.mhcc-price{ opacity:.9; }
.mhcc-countdown{ font-size:12px; opacity:.85; margin-top:6px; }

/* Pulsating frames */
@keyframes pulseDiamond { 0%,100%{ box-shadow:0 0 12px #00e6ff; } 50%{ box-shadow:0 0 28px #00e6ff; } }
@keyframes pulseGold { 0%,100%{ box-shadow:0 0 12px #ffd700; } 50%{ box-shadow:0 0 28px #ffd700; } }
@keyframes pulseEmerald { 0%,100%{ box-shadow:0 0 12px #31ff7a; } 50%{ box-shadow:0 0 28px #31ff7a; } }
.frame-diamond .mhcc-avatar img{ animation: pulseDiamond 2.5s infinite; }
.frame-gold .mhcc-avatar img{ animation: pulseGold 2.6s infinite; }
.frame-emerald .mhcc-avatar img{ animation: pulseEmerald 2.4s infinite; }

/* BGM Controls */
.mhcc-bgm{ position:fixed; right:14px; bottom:14px; z-index:10000; display:flex; gap:8px; align-items:center; background:rgba(15,22,32,.75); border:1px solid rgba(255,255,255,.07); padding:8px 10px; border-radius:12px; backdrop-filter: blur(6px); }
.mhcc-bgm input[type=range]{ width:120px; }

/* Theme variations */
body.mhcc-theme-halloween{ --mhcc-bg:#0d0a11; --mhcc-card:#15101c; --mhcc-neon:#ff7a18; }
body.mhcc-theme-christmas{ --mhcc-bg:#0b0f0c; --mhcc-card:#0f1612; --mhcc-neon:#a8ffdc; }

.mhcc-footer{ margin-top:18px; padding:12px; text-align:center; opacity:.8; }

/* Leaderboard */
.mhcc-table{ width:100%; border-collapse: collapse; }
.mhcc-table th,.mhcc-table td{ text-align:left; padding:8px; border-bottom:1px solid rgba(255,255,255,.06); }
.mhcc-lb-status{ opacity:.8; font-size:12px; margin-top:6px; }