/* MC Ranks Dark – Frontend */
.mcranks-wrapper { --bg:#0b0e14; --card:#111625; --text:#e6e7ea; --muted:#a2a6b3; --accent:#5dd3ff; --ring:rgba(93,211,255,0.25); }
.mcranks-wrapper[data-theme="halloween"] { --accent:#ff8c00; --ring:rgba(255,140,0,0.25); --bg:#050505; --card:#0d0d0d; }
.mcranks-wrapper[data-theme="weihnachten"] { --accent:#00d084; --ring:rgba(0,208,132,0.25); --bg:#07110a; --card:#0c1a12; }
.mcranks-wrapper { background: var(--bg); color: var(--text); padding: 2rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.mcranks-grid { display: grid; gap: 1.25rem; }
.mcranks-grid.cols-1 { grid-template-columns: 1fr; }
.mcranks-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.mcranks-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mcranks-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.mcrank-card { position: relative; background: linear-gradient(180deg, var(--card), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; padding: 1rem; overflow: hidden; transform: translateY(10px); opacity: 0; }
.mcrank-card.in-view { animation: enter 600ms ease forwards; }
@keyframes enter { to { transform: translateY(0); opacity: 1; } }
.mcranks-wrapper[data-animation="floaty"] .mcrank-card.in-view { animation: enterFloaty 900ms ease forwards; }
@keyframes enterFloaty { 0%{ transform: translateY(14px) scale(.98); opacity:.0;} 60%{ transform: translateY(-4px) scale(1); opacity:1;} 100%{ transform: translateY(0);} }
.mcranks-wrapper[data-animation="glow"] .mcrank-card.in-view { box-shadow: 0 0 0 0 var(--ring); animation: glowIn 1200ms ease forwards; }
@keyframes glowIn { 0%{ box-shadow: 0 0 0 0 var(--ring); opacity:.0; transform: translateY(12px);} 100%{ box-shadow: 0 0 25px 2px var(--ring); opacity:1; transform: translateY(0);} }
.mcrank-badge { position: absolute; top: 10px; right: 10px; background: var(--accent); color: #081018; font-weight: 700; font-size: .75rem; padding: .35rem .6rem; border-radius: 999px; }
.mcrank-media { aspect-ratio: 16/9; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; overflow: hidden; display:flex; align-items:center; justify-content:center; }
.mcrank-media img { width: 100%; height: 100%; object-fit: cover; display:block; }
.mcrank-title { margin: .85rem 0 .35rem; font-size: 1.15rem; letter-spacing:.2px; }
.mcrank-content { color: var(--muted); font-size:.95rem; line-height:1.5; }
.mcrank-features { margin:.75rem 0 0; padding-left: 1.2rem; }
.mcrank-features li { margin:.25rem 0; position: relative; }
.mcrank-features li::marker { color: var(--accent); }
.mcrank-card:hover { border-color: var(--accent); box-shadow: 0 10px 25px rgba(0,0,0,.35), 0 0 0 3px var(--ring); }
.mcrank-card:focus-within { outline: none; box-shadow: 0 0 0 3px var(--ring); }
/* Mobile fixes */
@media (max-width: 900px) { .mcranks-grid.cols-4 { grid-template-columns: repeat(3,1fr);} }
@media (max-width: 700px) { .mcranks-grid.cols-3, .mcranks-grid.cols-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 480px) { .mcranks-grid { grid-template-columns: 1fr; } }