15 CSS Testimonials & Reviews 10 / 15
Gaming Esports
Black with lime/cyan/pink/orange neon per rank, angular clip-path cards with blade-in entrance animation, scanline overlay, KD ratio / win rate stats, scoreboard-style score card, and rank badges.
The code
<section class="tm-gam" aria-label="Player reviews">
<header class="tm-gam-hdr">
<div class="tm-gam-game-logo"><span class="tm-gam-g1">APEX</span><span class="tm-gam-g2">REVIEWS</span></div>
<div class="tm-gam-live-badge">
<span class="tm-gam-lb-dot" aria-hidden="true"></span>
<span>Live · 3,420 online</span>
</div>
</header>
<div class="tm-gam-grid">
<article class="tm-gam-card tm-gam-cl tm-gam-feat">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Legendary · MVP</div>
<div class="tm-gam-kd-row">
<div class="tm-gam-kd-item"><div class="tm-gam-kd-val">4.2</div><div class="tm-gam-kd-lbl">K/D ratio</div></div>
<div class="tm-gam-kd-item"><div class="tm-gam-kd-val">94%</div><div class="tm-gam-kd-lbl">Win rate</div></div>
<div class="tm-gam-kd-item"><div class="tm-gam-kd-val">3,800</div><div class="tm-gam-kd-lbl">Hours played</div></div>
</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">I've been competing for seven years across four different titles. The coaching subscription changed my fundamentals in <b>eight sessions</b>. Got to Champion rank for the first time ever. My duo still doesn't believe I'm the same player. Neither do I, honestly.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">GR</span>
<span><cite class="tm-gam-an">GhostRaze</cite><span class="tm-gam-ar">Top 500 · NA Server</span></span>
</figcaption>
</article>
<div class="tm-gam-col">
<article class="tm-gam-card tm-gam-cc">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Diamond</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">The ping optimization guide alone dropped me from <b>74ms to 18ms</b>. Games feel completely different.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">VX</span>
<span><cite class="tm-gam-an">VoidShift.exe</cite><span class="tm-gam-ar">Diamond I · EU</span></span>
</figcaption>
</article>
<div class="tm-gam-score-card">
<div class="tm-gam-sc-big">9.9</div>
<div class="tm-gam-sc-sub">Platform score · 42K reviews</div>
<div class="tm-gam-sc-row">
<div class="tm-gam-sc-stat"><div class="tm-gam-sc-val">42K</div><div class="tm-gam-sc-lbl">Reviews</div></div>
<div class="tm-gam-sc-stat"><div class="tm-gam-sc-val">98%</div><div class="tm-gam-sc-lbl">Recommend</div></div>
<div class="tm-gam-sc-stat"><div class="tm-gam-sc-val">3.2M</div><div class="tm-gam-sc-lbl">Players</div></div>
</div>
</div>
</div>
</div>
<div class="tm-gam-grid2">
<article class="tm-gam-card tm-gam-cp">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Platinum</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">Went from Silver to <b>Platinum in 30 days</b>. The ranked roadmap is the most structured improvement plan I've seen outside of pro orgs.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">NK</span>
<span><cite class="tm-gam-an">NightKitsune</cite><span class="tm-gam-ar">Platinum III · APAC</span></span>
</figcaption>
</article>
<article class="tm-gam-card tm-gam-co">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Gold</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">Hardware recommendations boosted my FPS by <b>140 frames</b>. My reaction time measurably improved in a week. Actual game changer.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">BB</span>
<span><cite class="tm-gam-an">ByteBomber</cite><span class="tm-gam-ar">Gold I → Diamond</span></span>
</figcaption>
</article>
<article class="tm-gam-card tm-gam-cl">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Champion</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">Just signed my first <b>semi-pro contract</b>. The mental coaching section was the piece I didn't know I needed. Clutch factor went through the roof.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">TR</span>
<span><cite class="tm-gam-an">TitanRise</cite><span class="tm-gam-ar">Pro contender · NA</span></span>
</figcaption>
</article>
</div>
</section> <section class="tm-gam" aria-label="Player reviews">
<header class="tm-gam-hdr">
<div class="tm-gam-game-logo"><span class="tm-gam-g1">APEX</span><span class="tm-gam-g2">REVIEWS</span></div>
<div class="tm-gam-live-badge">
<span class="tm-gam-lb-dot" aria-hidden="true"></span>
<span>Live · 3,420 online</span>
</div>
</header>
<div class="tm-gam-grid">
<article class="tm-gam-card tm-gam-cl tm-gam-feat">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Legendary · MVP</div>
<div class="tm-gam-kd-row">
<div class="tm-gam-kd-item"><div class="tm-gam-kd-val">4.2</div><div class="tm-gam-kd-lbl">K/D ratio</div></div>
<div class="tm-gam-kd-item"><div class="tm-gam-kd-val">94%</div><div class="tm-gam-kd-lbl">Win rate</div></div>
<div class="tm-gam-kd-item"><div class="tm-gam-kd-val">3,800</div><div class="tm-gam-kd-lbl">Hours played</div></div>
</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">I've been competing for seven years across four different titles. The coaching subscription changed my fundamentals in <b>eight sessions</b>. Got to Champion rank for the first time ever. My duo still doesn't believe I'm the same player. Neither do I, honestly.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">GR</span>
<span><cite class="tm-gam-an">GhostRaze</cite><span class="tm-gam-ar">Top 500 · NA Server</span></span>
</figcaption>
</article>
<div class="tm-gam-col">
<article class="tm-gam-card tm-gam-cc">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Diamond</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">The ping optimization guide alone dropped me from <b>74ms to 18ms</b>. Games feel completely different.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">VX</span>
<span><cite class="tm-gam-an">VoidShift.exe</cite><span class="tm-gam-ar">Diamond I · EU</span></span>
</figcaption>
</article>
<div class="tm-gam-score-card">
<div class="tm-gam-sc-big">9.9</div>
<div class="tm-gam-sc-sub">Platform score · 42K reviews</div>
<div class="tm-gam-sc-row">
<div class="tm-gam-sc-stat"><div class="tm-gam-sc-val">42K</div><div class="tm-gam-sc-lbl">Reviews</div></div>
<div class="tm-gam-sc-stat"><div class="tm-gam-sc-val">98%</div><div class="tm-gam-sc-lbl">Recommend</div></div>
<div class="tm-gam-sc-stat"><div class="tm-gam-sc-val">3.2M</div><div class="tm-gam-sc-lbl">Players</div></div>
</div>
</div>
</div>
</div>
<div class="tm-gam-grid2">
<article class="tm-gam-card tm-gam-cp">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Platinum</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">Went from Silver to <b>Platinum in 30 days</b>. The ranked roadmap is the most structured improvement plan I've seen outside of pro orgs.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">NK</span>
<span><cite class="tm-gam-an">NightKitsune</cite><span class="tm-gam-ar">Platinum III · APAC</span></span>
</figcaption>
</article>
<article class="tm-gam-card tm-gam-co">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Gold</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">Hardware recommendations boosted my FPS by <b>140 frames</b>. My reaction time measurably improved in a week. Actual game changer.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">BB</span>
<span><cite class="tm-gam-an">ByteBomber</cite><span class="tm-gam-ar">Gold I → Diamond</span></span>
</figcaption>
</article>
<article class="tm-gam-card tm-gam-cl">
<span class="tm-gam-aline" aria-hidden="true"></span>
<span class="tm-gam-card-glow" aria-hidden="true"></span>
<div class="tm-gam-rank">◆ Champion</div>
<div class="tm-gam-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-gam-q">Just signed my first <b>semi-pro contract</b>. The mental coaching section was the piece I didn't know I needed. Clutch factor went through the roof.</blockquote>
<figcaption class="tm-gam-author">
<span class="tm-gam-av" aria-hidden="true">TR</span>
<span><cite class="tm-gam-an">TitanRise</cite><span class="tm-gam-ar">Pro contender · NA</span></span>
</figcaption>
</article>
</div>
</section>/* Gaming Esports — angled clip-path cards with blade-in entrance.
Scanline overlay sits on each card via ::before. Four neon palette
modifiers (cl=lime, cc=cyan, cp=pink, co=orange) drive accents per
rank tier. Hexagon avatars via clip-path. */
.tm-gam {
--tm-gam-bg: #0a0a0f;
--tm-gam-card: #0e0e16;
--tm-gam-lime: #c8ff00;
--tm-gam-cyan: #00ffee;
--tm-gam-pink: #ff0055;
--tm-gam-orange: #ff6a00;
--tm-gam-white: #e8e8f0;
--tm-gam-muted: #5a5a78;
--tm-gam-border: rgba(200,255,0,0.12);
position: relative;
padding: clamp(28px, 4vw, 44px);
background: var(--tm-gam-bg);
background-image:
linear-gradient(rgba(200,255,0,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(200,255,0,0.04) 1px, transparent 1px);
background-size: 40px 40px;
font-family: 'Rajdhani', system-ui, sans-serif;
color: var(--tm-gam-white);
min-height: 520px;
overflow: hidden;
}
.tm-gam-hdr {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28px;
border-bottom: 1px solid var(--tm-gam-border);
padding-bottom: 18px;
flex-wrap: wrap;
gap: 12px;
}
.tm-gam-game-logo {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 900;
font-size: 1.5rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.tm-gam-g1 { color: var(--tm-gam-lime); }
.tm-gam-g2 { color: var(--tm-gam-white); }
.tm-gam-live-badge {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 10px;
color: var(--tm-gam-pink);
text-transform: uppercase;
letter-spacing: 0.15em;
border: 1px solid rgba(255,0,85,0.3);
padding: 5px 12px;
}
.tm-gam-lb-dot {
width: 6px;
height: 6px;
background: var(--tm-gam-pink);
border-radius: 50%;
animation: tm-gam-glow 1.2s ease-in-out infinite alternate;
}
@keyframes tm-gam-glow {
from { box-shadow: 0 0 4px var(--tm-gam-pink); }
to { box-shadow: 0 0 12px var(--tm-gam-pink), 0 0 20px var(--tm-gam-pink); }
}
.tm-gam-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 3px;
margin-bottom: 3px;
}
.tm-gam-col {
display: flex;
flex-direction: column;
gap: 3px;
}
.tm-gam-grid2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
.tm-gam-card {
background: var(--tm-gam-card);
border: 1px solid rgba(255,255,255,0.05);
padding: 24px 22px;
position: relative;
overflow: hidden;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
transition: all 0.3s ease;
animation: tm-gam-bladein 0.6s ease both;
display: flex;
flex-direction: column;
}
.tm-gam-card:hover {
background: #12121e;
border-color: rgba(200,255,0,0.2);
transform: translateY(-2px);
}
.tm-gam-card:hover .tm-gam-card-glow { opacity: 1; }
.tm-gam-card:nth-child(1) { animation-delay: 0.04s; }
.tm-gam-card:nth-child(2) { animation-delay: 0.10s; }
.tm-gam-card:nth-child(3) { animation-delay: 0.16s; }
@keyframes tm-gam-bladein {
from {
opacity: 0;
clip-path: polygon(0 0, 0 0, 0 16px, 0 100%, 0 100%);
}
to {
opacity: 1;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
}
.tm-gam-card-glow {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}
.tm-gam-cl .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(200,255,0,0.08), transparent 60%); }
.tm-gam-cc .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(0,255,238,0.06), transparent 60%); }
.tm-gam-cp .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(255,0,85,0.06), transparent 60%); }
.tm-gam-co .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(255,106,0,0.06), transparent 60%); }
.tm-gam-aline {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.tm-gam-cl .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-lime), transparent); }
.tm-gam-cc .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-cyan), transparent); }
.tm-gam-cp .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-pink), transparent); }
.tm-gam-co .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-orange), transparent); }
.tm-gam-rank {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 14px;
padding: 3px 10px;
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
width: fit-content;
}
.tm-gam-cl .tm-gam-rank { background: rgba(200,255,0,0.12); color: var(--tm-gam-lime); border: 1px solid rgba(200,255,0,0.25); }
.tm-gam-cc .tm-gam-rank { background: rgba(0,255,238,0.08); color: var(--tm-gam-cyan); border: 1px solid rgba(0,255,238,0.2); }
.tm-gam-cp .tm-gam-rank { background: rgba(255,0,85,0.1); color: var(--tm-gam-pink); border: 1px solid rgba(255,0,85,0.25); }
.tm-gam-co .tm-gam-rank { background: rgba(255,106,0,0.1); color: var(--tm-gam-orange); border: 1px solid rgba(255,106,0,0.25); }
.tm-gam-kd-row {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.tm-gam-kd-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.tm-gam-kd-val {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 700;
font-size: 1.2rem;
line-height: 1;
}
.tm-gam-cl .tm-gam-kd-val { color: var(--tm-gam-lime); }
.tm-gam-cc .tm-gam-kd-val { color: var(--tm-gam-cyan); }
.tm-gam-cp .tm-gam-kd-val { color: var(--tm-gam-pink); }
.tm-gam-co .tm-gam-kd-val { color: var(--tm-gam-orange); }
.tm-gam-kd-lbl {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 8px;
color: var(--tm-gam-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.tm-gam-stars {
display: flex;
gap: 3px;
margin-bottom: 14px;
font-size: 13px;
}
.tm-gam-cl .tm-gam-stars { color: var(--tm-gam-lime); }
.tm-gam-cc .tm-gam-stars { color: var(--tm-gam-cyan); }
.tm-gam-cp .tm-gam-stars { color: var(--tm-gam-pink); }
.tm-gam-co .tm-gam-stars { color: var(--tm-gam-orange); }
.tm-gam-q {
font-size: 0.9rem;
line-height: 1.6;
color: rgba(232,232,240,0.7);
font-weight: 400;
margin: 0 0 18px;
font-style: normal;
flex: 1;
}
.tm-gam-feat .tm-gam-q { font-size: 1.02rem; }
.tm-gam-q b { font-weight: 700; color: var(--tm-gam-white); }
.tm-gam-author {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 14px;
}
.tm-gam-av {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.tm-gam-cl .tm-gam-av { background: rgba(200,255,0,0.15); color: var(--tm-gam-lime); border: 1px solid rgba(200,255,0,0.3); }
.tm-gam-cc .tm-gam-av { background: rgba(0,255,238,0.1); color: var(--tm-gam-cyan); }
.tm-gam-cp .tm-gam-av { background: rgba(255,0,85,0.15); color: var(--tm-gam-pink); }
.tm-gam-co .tm-gam-av { background: rgba(255,106,0,0.12); color: var(--tm-gam-orange); }
.tm-gam-an {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 700;
font-size: 14px;
font-style: normal;
letter-spacing: 0.04em;
color: var(--tm-gam-white);
line-height: 1.2;
display: block;
}
.tm-gam-ar {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 9px;
color: var(--tm-gam-muted);
margin-top: 2px;
letter-spacing: 0.05em;
}
.tm-gam-score-card {
background: linear-gradient(135deg, #0e0e16, #141420);
border: 1px solid rgba(200,255,0,0.2);
padding: 24px 22px;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
animation: tm-gam-bladein 0.6s ease 0.34s both;
}
.tm-gam-sc-big {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 900;
font-size: 3.4rem;
color: var(--tm-gam-lime);
line-height: 1;
text-shadow: 0 0 30px rgba(200,255,0,0.4);
}
.tm-gam-sc-sub {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 9px;
color: var(--tm-gam-muted);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: 6px;
}
.tm-gam-sc-row {
display: flex;
gap: 22px;
margin-top: 18px;
}
.tm-gam-sc-val {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 700;
font-size: 1.3rem;
color: var(--tm-gam-white);
line-height: 1;
}
.tm-gam-sc-lbl {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 8px;
color: var(--tm-gam-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 2px;
}
.tm-gam-card::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px);
pointer-events: none;
z-index: 0;
}
@media (max-width: 820px) {
.tm-gam-grid { grid-template-columns: 1fr; }
.tm-gam-grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.tm-gam-card, .tm-gam-score-card { animation: none; }
.tm-gam-lb-dot { animation: none; }
.tm-gam-card:hover { transform: none; }
} /* Gaming Esports — angled clip-path cards with blade-in entrance.
Scanline overlay sits on each card via ::before. Four neon palette
modifiers (cl=lime, cc=cyan, cp=pink, co=orange) drive accents per
rank tier. Hexagon avatars via clip-path. */
.tm-gam {
--tm-gam-bg: #0a0a0f;
--tm-gam-card: #0e0e16;
--tm-gam-lime: #c8ff00;
--tm-gam-cyan: #00ffee;
--tm-gam-pink: #ff0055;
--tm-gam-orange: #ff6a00;
--tm-gam-white: #e8e8f0;
--tm-gam-muted: #5a5a78;
--tm-gam-border: rgba(200,255,0,0.12);
position: relative;
padding: clamp(28px, 4vw, 44px);
background: var(--tm-gam-bg);
background-image:
linear-gradient(rgba(200,255,0,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(200,255,0,0.04) 1px, transparent 1px);
background-size: 40px 40px;
font-family: 'Rajdhani', system-ui, sans-serif;
color: var(--tm-gam-white);
min-height: 520px;
overflow: hidden;
}
.tm-gam-hdr {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28px;
border-bottom: 1px solid var(--tm-gam-border);
padding-bottom: 18px;
flex-wrap: wrap;
gap: 12px;
}
.tm-gam-game-logo {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 900;
font-size: 1.5rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.tm-gam-g1 { color: var(--tm-gam-lime); }
.tm-gam-g2 { color: var(--tm-gam-white); }
.tm-gam-live-badge {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 10px;
color: var(--tm-gam-pink);
text-transform: uppercase;
letter-spacing: 0.15em;
border: 1px solid rgba(255,0,85,0.3);
padding: 5px 12px;
}
.tm-gam-lb-dot {
width: 6px;
height: 6px;
background: var(--tm-gam-pink);
border-radius: 50%;
animation: tm-gam-glow 1.2s ease-in-out infinite alternate;
}
@keyframes tm-gam-glow {
from { box-shadow: 0 0 4px var(--tm-gam-pink); }
to { box-shadow: 0 0 12px var(--tm-gam-pink), 0 0 20px var(--tm-gam-pink); }
}
.tm-gam-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 3px;
margin-bottom: 3px;
}
.tm-gam-col {
display: flex;
flex-direction: column;
gap: 3px;
}
.tm-gam-grid2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
.tm-gam-card {
background: var(--tm-gam-card);
border: 1px solid rgba(255,255,255,0.05);
padding: 24px 22px;
position: relative;
overflow: hidden;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
transition: all 0.3s ease;
animation: tm-gam-bladein 0.6s ease both;
display: flex;
flex-direction: column;
}
.tm-gam-card:hover {
background: #12121e;
border-color: rgba(200,255,0,0.2);
transform: translateY(-2px);
}
.tm-gam-card:hover .tm-gam-card-glow { opacity: 1; }
.tm-gam-card:nth-child(1) { animation-delay: 0.04s; }
.tm-gam-card:nth-child(2) { animation-delay: 0.10s; }
.tm-gam-card:nth-child(3) { animation-delay: 0.16s; }
@keyframes tm-gam-bladein {
from {
opacity: 0;
clip-path: polygon(0 0, 0 0, 0 16px, 0 100%, 0 100%);
}
to {
opacity: 1;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
}
.tm-gam-card-glow {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}
.tm-gam-cl .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(200,255,0,0.08), transparent 60%); }
.tm-gam-cc .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(0,255,238,0.06), transparent 60%); }
.tm-gam-cp .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(255,0,85,0.06), transparent 60%); }
.tm-gam-co .tm-gam-card-glow { background: radial-gradient(ellipse at top left, rgba(255,106,0,0.06), transparent 60%); }
.tm-gam-aline {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
}
.tm-gam-cl .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-lime), transparent); }
.tm-gam-cc .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-cyan), transparent); }
.tm-gam-cp .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-pink), transparent); }
.tm-gam-co .tm-gam-aline { background: linear-gradient(to right, var(--tm-gam-orange), transparent); }
.tm-gam-rank {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 14px;
padding: 3px 10px;
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
width: fit-content;
}
.tm-gam-cl .tm-gam-rank { background: rgba(200,255,0,0.12); color: var(--tm-gam-lime); border: 1px solid rgba(200,255,0,0.25); }
.tm-gam-cc .tm-gam-rank { background: rgba(0,255,238,0.08); color: var(--tm-gam-cyan); border: 1px solid rgba(0,255,238,0.2); }
.tm-gam-cp .tm-gam-rank { background: rgba(255,0,85,0.1); color: var(--tm-gam-pink); border: 1px solid rgba(255,0,85,0.25); }
.tm-gam-co .tm-gam-rank { background: rgba(255,106,0,0.1); color: var(--tm-gam-orange); border: 1px solid rgba(255,106,0,0.25); }
.tm-gam-kd-row {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.tm-gam-kd-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.tm-gam-kd-val {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 700;
font-size: 1.2rem;
line-height: 1;
}
.tm-gam-cl .tm-gam-kd-val { color: var(--tm-gam-lime); }
.tm-gam-cc .tm-gam-kd-val { color: var(--tm-gam-cyan); }
.tm-gam-cp .tm-gam-kd-val { color: var(--tm-gam-pink); }
.tm-gam-co .tm-gam-kd-val { color: var(--tm-gam-orange); }
.tm-gam-kd-lbl {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 8px;
color: var(--tm-gam-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.tm-gam-stars {
display: flex;
gap: 3px;
margin-bottom: 14px;
font-size: 13px;
}
.tm-gam-cl .tm-gam-stars { color: var(--tm-gam-lime); }
.tm-gam-cc .tm-gam-stars { color: var(--tm-gam-cyan); }
.tm-gam-cp .tm-gam-stars { color: var(--tm-gam-pink); }
.tm-gam-co .tm-gam-stars { color: var(--tm-gam-orange); }
.tm-gam-q {
font-size: 0.9rem;
line-height: 1.6;
color: rgba(232,232,240,0.7);
font-weight: 400;
margin: 0 0 18px;
font-style: normal;
flex: 1;
}
.tm-gam-feat .tm-gam-q { font-size: 1.02rem; }
.tm-gam-q b { font-weight: 700; color: var(--tm-gam-white); }
.tm-gam-author {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 14px;
}
.tm-gam-av {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.tm-gam-cl .tm-gam-av { background: rgba(200,255,0,0.15); color: var(--tm-gam-lime); border: 1px solid rgba(200,255,0,0.3); }
.tm-gam-cc .tm-gam-av { background: rgba(0,255,238,0.1); color: var(--tm-gam-cyan); }
.tm-gam-cp .tm-gam-av { background: rgba(255,0,85,0.15); color: var(--tm-gam-pink); }
.tm-gam-co .tm-gam-av { background: rgba(255,106,0,0.12); color: var(--tm-gam-orange); }
.tm-gam-an {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 700;
font-size: 14px;
font-style: normal;
letter-spacing: 0.04em;
color: var(--tm-gam-white);
line-height: 1.2;
display: block;
}
.tm-gam-ar {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 9px;
color: var(--tm-gam-muted);
margin-top: 2px;
letter-spacing: 0.05em;
}
.tm-gam-score-card {
background: linear-gradient(135deg, #0e0e16, #141420);
border: 1px solid rgba(200,255,0,0.2);
padding: 24px 22px;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
animation: tm-gam-bladein 0.6s ease 0.34s both;
}
.tm-gam-sc-big {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 900;
font-size: 3.4rem;
color: var(--tm-gam-lime);
line-height: 1;
text-shadow: 0 0 30px rgba(200,255,0,0.4);
}
.tm-gam-sc-sub {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 9px;
color: var(--tm-gam-muted);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: 6px;
}
.tm-gam-sc-row {
display: flex;
gap: 22px;
margin-top: 18px;
}
.tm-gam-sc-val {
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
font-weight: 700;
font-size: 1.3rem;
color: var(--tm-gam-white);
line-height: 1;
}
.tm-gam-sc-lbl {
font-family: 'Share Tech Mono', ui-monospace, monospace;
font-size: 8px;
color: var(--tm-gam-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 2px;
}
.tm-gam-card::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px);
pointer-events: none;
z-index: 0;
}
@media (max-width: 820px) {
.tm-gam-grid { grid-template-columns: 1fr; }
.tm-gam-grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.tm-gam-card, .tm-gam-score-card { animation: none; }
.tm-gam-lb-dot { animation: none; }
.tm-gam-card:hover { transform: none; }
}