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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user