Declutter the challenge panel and obstacle titles (v4)

Per playtest feedback:
- Drop the per-challenge 'Plays:' line — redundant with the card column and the
  event log (also removes the now-unused chPlays const).
- Drop the 'Attempted by … drag a card … assist' how-to paragraph; players know
  the basics, and the challenge header already names who's challenged.
- Replace the 'Red/Black Obstacle · match to draw' tag with the original card in
  the title (e.g. '5♣ — Loitering Mermaid'), and color the title by suit. The
  left border already marks color; the dead .obstacle-color-tag CSS is removed.

Suit glyphs in the title use plain text symbols (not SUIT_EMOJI) so they take
the theme-aware suit color and stay readable on the dark panel. Verified in
light and dark.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-15 09:56:07 -07:00
parent 922fc38c0a
commit e4c78391fc
4 changed files with 21 additions and 58 deletions

View File

@@ -241,43 +241,6 @@
box-shadow: 0 0 0 2px var(--danger);
}
/* Obstacle color (red/black) — fixed by the original card; matching it draws back */
.obstacle-color-tag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.4rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.12rem 0.5rem;
border-radius: 999px;
cursor: help;
}
.obstacle-color-tag::before {
content: '';
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
display: inline-block;
}
.obstacle-color-tag.red {
color: var(--suit-red);
background: color-mix(in srgb, var(--suit-red) 14%, transparent);
}
.obstacle-color-tag.red::before { background: var(--suit-red); }
.obstacle-color-tag.black {
color: var(--suit-black);
background: color-mix(in srgb, var(--suit-black) 14%, transparent);
}
.obstacle-color-tag.black::before { background: var(--suit-black); }
.suit-badge {
font-weight: 900;
font-size: 1.1rem;
@@ -298,6 +261,13 @@
font-size: 1.15rem;
}
/* The title and its "K♦" card-code prefix take the Obstacle's fixed suit color
(red border on the left already marks color, so the old tag is gone). */
.suit-h .obstacle-details h4, .suit-d .obstacle-details h4 { color: var(--suit-red); }
.suit-c .obstacle-details h4, .suit-s .obstacle-details h4 { color: var(--suit-black); }
.obs-card-code { opacity: 0.8; }
.obstacle-details .in-challenge-tag {
color: var(--deep);
font-size: 0.8rem;