.covers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-top:16px;}
@media(max-width:900px){.covers{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.covers{grid-template-columns:1fr;}}
.cover{position:relative;background:var(--card);border-radius:var(--r);box-shadow:var(--sh);display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;border:1px solid var(--line);}
.cover:hover{transform:translateY(-5px);box-shadow:var(--sh-lift);}
a.cover{color:inherit;text-decoration:none;}
a.cover:focus-visible{outline:2px solid var(--violet);outline-offset:2px;}
.cover__art{height:132px;position:relative;overflow:hidden;border-radius:var(--r) var(--r) 0 0;display:flex;align-items:flex-end;padding:16px;color:#fff;background:var(--cover-bg,#7C3AED);}
.cover__glyph{position:absolute;top:-14px;right:-6px;font-size:76px;opacity:.4;z-index:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35));transform:rotate(-8deg);}
.cover__badge{position:absolute;top:-12px;left:12px;z-index:5;background:var(--ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 12px;border-radius:8px;box-shadow:0 2px 6px rgba(23,19,32,.3);}
.cover__body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.cover__title{font-family:var(--font-d);font-weight:600;font-size:16px;line-height:1.25;}
.cover__meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--muted);align-items:center;}
.cover__meta .diff{font-weight:700;}
.d-easy{color:var(--mint);} .d-med{color:#D97706;} .d-hard{color:var(--coral);}
.cover__play{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;border-radius:13px;background:var(--violet);color:#fff;font-weight:700;font-size:15px;transition:background .15s,transform .12s;}
.cover__play:hover{background:var(--violet-d);color:#fff;transform:scale(1.01);}
.cover--wip{cursor:default;opacity:.72;}
.cover--wip:hover{transform:none;box-shadow:none;}
.cover__play--wip{background:var(--muted,#9CA3AF);pointer-events:none;}
.cover__play--wip:hover{background:var(--muted,#9CA3AF);transform:none;}
.cover__wip-row{display:flex;flex-direction:column;gap:6px;margin-top:auto;}
.cover__wip-badge{display:inline-block;font-size:11px;font-weight:600;color:var(--muted,#6B7280);background:var(--bg-2,#F3F4F6);border-radius:6px;padding:3px 8px;text-align:center;}
@media(prefers-color-scheme:dark){
  .cover__wip-badge{background:#374151;color:#9CA3AF;}
}
