Techniques
Guard-glyph shape markers
The circle/triangle/square guard trinity rendered as pure CSS shapes for badges and section markers.
.glyph { display: inline-flex; gap: 8px; }
.glyph--circle {
width: 20px; height: 20px; border-radius: 9999px;
background: #ED1B76;
}
.glyph--triangle {
width: 0; height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 20px solid #ED1B76;
}
.glyph--square {
width: 20px; height: 20px; background: #ED1B76;
}
Stencil player-number tag
Cards styled as numbered player tags — teal border with an oversized white numeral in the corner.
.player-tag {
position: relative;
background: #1BA098;
color: #FFFFFF;
border-radius: 10px;
padding: 24px;
font-family: 'Space Mono', monospace;
}
.player-tag::before {
content: attr(data-number);
position: absolute; top: 12px; right: 16px;
font-size: 3rem; font-weight: 700;
color: rgba(255,255,255,0.85);
letter-spacing: -0.04em;
}
Fuchsia set-light glow
The single depth cue — a soft pink glow on hero blocks mimicking the corridor's stage lighting, no drop shadow.
.set-lit {
background: #ED1B76;
color: #FFFFFF;
box-shadow: 0 6px 20px rgba(237, 27, 118, 0.18);
}
.set-lit:hover {
box-shadow: 0 12px 32px rgba(237, 27, 118, 0.22);
transform: translateY(-4px);
}