/* The album game page (album_game.py); the rest of the look comes from theme.css. */
.header-side { flex: 1; display: flex; align-items: center; }
.back-link { color: var(--muted); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: color 0.16s var(--ease); }
.back-link:hover { color: var(--text); }
.feature-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; margin: 4px 0 18px; }
.feature-count { flex-basis: 100%; text-align: center; color: var(--muted); font-size: 0.9rem; margin-bottom: 4px; }
.feature-chip {
  padding: 9px 18px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-pill);
  background: #1c1c1c; color: var(--text); font-weight: 600; animation: box-in 0.28s var(--ease) both;
}
.album-hints { max-width: 560px; margin-bottom: 12px; text-align: center; }
.album-hint { color: var(--accent); font-weight: 600; margin: 2px 0; }
.chain-sub { color: rgba(255, 255, 255, 0.75); font-weight: 500; }
.album-controls { flex-direction: column; align-items: center; gap: 14px; width: 100%; margin-top: 8px; }
.album-note { color: var(--warn); text-align: center; }
.album-result-head { font-size: 1.4rem; font-weight: 800; color: var(--accent); margin-bottom: 10px; }
.album-cover { display: block; width: 180px; height: 180px; margin: 0 auto 12px; border-radius: 14px; object-fit: cover; }
.album-answer { font-weight: 700; margin-bottom: 12px; }
.album-share { display: inline-block; text-align: left; padding: 12px 18px; border: 1px solid var(--line); border-radius: 18px; color: var(--muted); font-family: var(--font); }

/* the back link sits at the page's left edge: its tooltip starts at the link instead of being centred on it */
.back-link[data-tip]::after { left: 0; transform: translate(0, -4px); }
.back-link[data-tip]:hover::after, .back-link[data-tip]:focus-visible::after { transform: translate(0, 0); }