:root {
--boxing-red: #C41E3A;
--ring-gold: #FFD700;
--canvas-white: #F5F5DC;
--knockout-black: #0A0A0A;
--victory-green: #2ECC71;
--rope-blue: #1E3A8A;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Barlow', sans-serif;
background: var(--knockout-black);
color: var(--canvas-white);
overflow-x: hidden;
}
/* Animated Background Pattern */
.bg-pattern {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: 
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255, 215, 0, 0.03) 2px,
rgba(255, 215, 0, 0.03) 4px
);
pointer-events: none;
z-index: 0;
}
/* Hero Section */
.hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
background: 
radial-gradient(circle at 50% 50%, rgba(196, 30, 58, 0.15) 0%, transparent 70%),
linear-gradient(180deg, var(--knockout-black) 0%, #1a0a0a 100%);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: 
repeating-linear-gradient(
45deg,
transparent,
transparent 100px,
rgba(255, 215, 0, 0.02) 100px,
rgba(255, 215, 0, 0.02) 102px
);
animation: rotate-bg 60s linear infinite;
pointer-events: none;
}
@keyframes rotate-bg {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.logo {
position: relative;
z-index: 2;
margin-bottom: 2rem;
animation: fadeInDown 1s ease-out;
}
.logo h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2rem, 8vw, 4rem);
letter-spacing: 0.1em;
color: var(--canvas-white);
text-shadow: 
0 0 20px rgba(255, 215, 0, 0.3),
0 0 40px rgba(255, 215, 0, 0.2);
margin-bottom: 0.5rem;
}
.logo .subtitle {
font-family: 'Oswald', sans-serif;
font-size: clamp(0.9rem, 2vw, 1.2rem);
letter-spacing: 0.3em;
color: var(--ring-gold);
font-weight: 400;
}
.game-title {
position: relative;
z-index: 2;
margin: 3rem 0;
animation: fadeInUp 1s ease-out 0.3s backwards;
}
.game-title h2 {
font-family: 'Oswald', sans-serif;
font-size: clamp(3rem, 12vw, 7rem);
font-weight: 700;
line-height: 0.9;
color: var(--boxing-red);
text-shadow: 
4px 4px 0 var(--ring-gold),
8px 8px 0 rgba(0, 0, 0, 0.3);
letter-spacing: -0.02em;
transform-style: preserve-3d;
}
.tagline {
position: relative;
z-index: 2;
font-family: 'Oswald', sans-serif;
font-size: clamp(1rem, 3vw, 1.8rem);
color: var(--canvas-white);
margin: 2rem 0 3rem;
letter-spacing: 0.05em;
animation: fadeInUp 1s ease-out 0.6s backwards;
}
.cta-button {
position: relative;
z-index: 2;
display: inline-block;
padding: 1.2rem 3rem;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.5rem;
letter-spacing: 0.15em;
color: var(--knockout-black);
background: var(--ring-gold);
border: none;
cursor: pointer;
text-decoration: none;
clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
transition: all 0.3s ease;
animation: fadeInUp 1s ease-out 0.9s backwards, pulse 2s ease-in-out 2s infinite;
box-shadow: 
0 4px 15px rgba(255, 215, 0, 0.4),
inset 0 -2px 10px rgba(0, 0, 0, 0.2);
}
.cta-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 
0 8px 25px rgba(255, 215, 0, 0.6),
inset 0 -2px 10px rgba(0, 0, 0, 0.3);
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Features Section */
.features {
position: relative;
z-index: 1;
padding: 6rem 2rem;
background: linear-gradient(180deg, #1a0a0a 0%, var(--knockout-black) 100%);
}
.section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.5rem, 6vw, 4rem);
text-align: center;
color: var(--ring-gold);
letter-spacing: 0.15em;
margin-bottom: 1rem;
text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.section-subtitle {
text-align: center;
font-size: 1.1rem;
color: #888;
margin-bottom: 4rem;
letter-spacing: 0.05em;
}
.features-grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
animation: fadeInUp 1s ease-out;
}
.feature-card {
position: relative;
padding: 2.5rem;
background: linear-gradient(135deg, rgba(196, 30, 58, 0.1) 0%, rgba(30, 58, 138, 0.1) 100%);
border: 2px solid rgba(255, 215, 0, 0.2);
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
transition: all 0.4s ease;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
transition: left 0.6s ease;
}
.feature-card:hover::before {
left: 100%;
}
.feature-card:hover {
transform: translateY(-10px);
border-color: rgba(255, 215, 0, 0.5);
box-shadow: 
0 20px 40px rgba(0, 0, 0, 0.4),
0 0 30px rgba(255, 215, 0, 0.2);
}
.feature-icon {
font-size: 3.5rem;
margin-bottom: 1.5rem;
display: block;
filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
}
.feature-title {
font-family: 'Oswald', sans-serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--ring-gold);
margin-bottom: 1rem;
letter-spacing: 0.05em;
}
.feature-description {
font-size: 1.05rem;
line-height: 1.7;
color: #ccc;
letter-spacing: 0.02em;
}
.feature-highlight {
display: inline-block;
margin-top: 1rem;
padding: 0.5rem 1rem;
background: rgba(255, 215, 0, 0.15);
border-left: 3px solid var(--ring-gold);
font-family: 'Oswald', sans-serif;
font-size: 0.95rem;
color: var(--ring-gold);
letter-spacing: 0.05em;
}
/* Stats Showcase */
.stats-showcase {
position: relative;
padding: 5rem 2rem;
background: 
linear-gradient(180deg, var(--knockout-black) 0%, rgba(196, 30, 58, 0.15) 50%, var(--knockout-black) 100%);
text-align: center;
}
.stats-grid {
max-width: 1200px;
margin: 4rem auto 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2rem;
}
.stat-box {
position: relative;
padding: 2rem 1rem;
animation: fadeInUp 1s ease-out;
}
.stat-box::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 4px;
background: linear-gradient(90deg, transparent, var(--ring-gold), transparent);
}
.stat-number {
font-family: 'Bebas Neue', sans-serif;
font-size: 4rem;
color: var(--boxing-red);
text-shadow: 
2px 2px 0 var(--ring-gold),
4px 4px 0 rgba(0, 0, 0, 0.3);
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-label {
font-family: 'Oswald', sans-serif;
font-size: 1.1rem;
color: var(--canvas-white);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.download-section {
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
margin-top: 3.5rem;
flex-wrap: wrap;
}
.download-play-badge a {
display: block;
transition: transform 0.2s ease;
}
.download-play-badge a:hover { transform: scale(1.05); }
.download-qr {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
}
.download-qr img {
box-shadow: 0 0 20px rgba(255,215,0,0.3);
transition: transform 0.2s ease;
}
.download-qr img:hover { transform: scale(1.05); }
.download-qr-label {
font-family: 'Bebas Neue', sans-serif;
font-size: 0.85rem;
color: var(--ring-gold);
letter-spacing: 0.15em;
}
.download-coming-soon {
font-family: 'Bebas Neue', sans-serif;
font-size: 1rem;
color: #888;
letter-spacing: 0.2em;
border: 1px solid #444;
padding: 0.6rem 1.4rem;
border-radius: 30px;
}
.hero-download {
display: flex;
align-items: center;
justify-content: center;
gap: 2.5rem;
margin-top: 2.5rem;
flex-wrap: wrap;
}
.hero-download-qr {
display: flex;
flex-direction: column;
align-items: center;
}
.hero-download img:hover { transform: scale(1.05); transition: transform 0.2s ease; }
.forum-breadcrumb a {
color: var(--ring-gold);
text-decoration: none;
transition: all 0.3s ease;
}
.forum-breadcrumb a:hover {
color: #FFC700;
}
.forum-breadcrumb span {
color: #ccc;
}
/* New Thread Button */
.new-thread-btn {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.2rem;
letter-spacing: 0.1em;
padding: 1rem 2.5rem;
background: var(--boxing-red);
color: var(--ring-gold);
border: 2px solid var(--ring-gold);
cursor: pointer;
transition: all 0.3s ease;
clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
margin-bottom: 2rem;
box-shadow: 0 4px 15px rgba(196, 30, 58, 0.4);
}
.new-thread-btn:hover {
background: #8B0000;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(196, 30, 58, 0.6);
}
/* Thread List */
.thread-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.thread-item {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 2px solid rgba(255, 215, 0, 0.15);
border-radius: 12px;
padding: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.thread-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.05), transparent);
transition: left 0.5s ease;
}
.thread-item:hover::before {
left: 100%;
}
.thread-item:hover {
border-color: rgba(255, 215, 0, 0.4);
transform: translateX(5px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.thread-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.8rem;
}
.thread-title-text {
font-family: 'Oswald', sans-serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--canvas-white);
margin-bottom: 0.5rem;
}
.thread-meta {
font-size: 0.85rem;
color: #888;
}
.thread-author {
color: var(--ring-gold);
font-weight: 600;
}
.thread-preview {
font-size: 0.95rem;
color: #aaa;
line-height: 1.6;
margin-bottom: 0.8rem;
}
.thread-stats {
display: flex;
gap: 1.5rem;
font-size: 0.85rem;
color: #666;
}
.thread-stat-item {
display: flex;
align-items: center;
gap: 0.3rem;
}
/* Thread View */
.thread-post {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 2px solid rgba(255, 215, 0, 0.15);
border-radius: 12px;
padding: 2rem;
margin-bottom: 1.5rem;
}
.thread-post.original-post {
border-color: rgba(255, 215, 0, 0.4);
background: linear-gradient(135deg, rgba(196, 30, 58, 0.1) 0%, rgba(30, 58, 138, 0.1) 100%);
}
.post-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}
.post-author-info {
display: flex;
align-items: center;
gap: 1rem;
}
.post-avatar {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--boxing-red), var(--rope-blue));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
border: 2px solid var(--ring-gold);
}
.post-author-details {
display: flex;
flex-direction: column;
}
.post-author-name {
font-family: 'Oswald', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--ring-gold);
}
.post-date {
font-size: 0.85rem;
color: #888;
}
.post-content {
font-size: 1.05rem;
line-height: 1.8;
color: #ccc;
white-space: pre-wrap;
}
.reply-section {
margin-top: 2rem;
padding-top: 2rem;
border-top: 2px solid rgba(255, 215, 0, 0.2);
}
.replies-title {
font-family: 'Oswald', sans-serif;
font-size: 1.3rem;
color: var(--ring-gold);
margin-bottom: 1.5rem;
}
.reply-form-container,
.thread-form-container {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 2px solid rgba(255, 215, 0, 0.2);
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
}
.form-title {
font-family: 'Oswald', sans-serif;
font-size: 1.5rem;
color: var(--ring-gold);
margin-bottom: 1.5rem;
letter-spacing: 0.05em;
}
.form-group textarea {
width: 100%;
padding: 1rem;
background: rgba(0, 0, 0, 0.4);
border: 2px solid rgba(255, 215, 0, 0.2);
border-radius: 8px;
color: var(--canvas-white);
font-size: 1rem;
font-family: 'Barlow', sans-serif;
resize: vertical;
transition: all 0.3s ease;
}
.form-group textarea:focus {
outline: none;
border-color: var(--ring-gold);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}
.form-actions {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.cancel-btn {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.2rem;
letter-spacing: 0.1em;
padding: 1rem 2rem;
background: transparent;
color: #888;
border: 2px solid #888;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 8px;
}
.cancel-btn:hover {
color: #ccc;
border-color: #ccc;
}
.empty-state {
text-align: center;
padding: 4rem 2rem;
color: #888;
}
.empty-state-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.5;
}
.empty-state-text {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.empty-state-subtext {
font-size: 0.9rem;
color: #666;
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
animation: fadeIn 0.3s ease;
}
.modal.active {
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
border: 2px solid rgba(255, 215, 0, 0.3);
border-radius: 15px;
padding: 3rem;
max-width: 500px;
width: 90%;
position: relative;
animation: slideUp 0.4s ease;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-close {
position: absolute;
top: 1rem;
right: 1.5rem;
font-size: 2rem;
color: #888;
cursor: pointer;
transition: all 0.3s ease;
}
.modal-close:hover {
color: var(--ring-gold);
transform: rotate(90deg);
}
.auth-form {
animation: fadeIn 0.4s ease;
}
.auth-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
color: var(--ring-gold);
text-align: center;
margin-bottom: 2rem;
letter-spacing: 0.1em;
text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-family: 'Oswald', sans-serif;
font-size: 0.95rem;
color: #ccc;
margin-bottom: 0.5rem;
letter-spacing: 0.05em;
}
.form-group input {
width: 100%;
padding: 0.8rem 1rem;
background: rgba(0, 0, 0, 0.4);
border: 2px solid rgba(255, 215, 0, 0.2);
border-radius: 8px;
color: var(--canvas-white);
font-size: 1rem;
transition: all 0.3s ease;
}
.form-group input:focus {
outline: none;
border-color: var(--ring-gold);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}
.form-group input::placeholder {
color: #555;
}
.auth-submit-btn {
width: 100%;
padding: 1rem;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.3rem;
letter-spacing: 0.15em;
color: var(--knockout-black);
background: var(--ring-gold);
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 1rem;
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}
.auth-submit-btn:hover {
background: #FFC700;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
}
.auth-switch {
text-align: center;
margin-top: 1.5rem;
font-size: 0.95rem;
color: #888;
}
.auth-switch a {
color: var(--ring-gold);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.auth-switch a:hover {
color: #FFC700;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
/* Footer */
.footer {
position: relative;
padding: 3rem 2rem;
background: #050505;
text-align: center;
border-top: 1px solid rgba(255, 215, 0, 0.2);
}
.footer-content {
max-width: 800px;
margin: 0 auto;
}
.footer-logo {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
letter-spacing: 0.15em;
color: var(--ring-gold);
margin-bottom: 1rem;
}
.footer-text {
font-size: 0.95rem;
color: #666;
line-height: 1.8;
}
.coming-soon-badge {
display: inline-block;
margin-top: 2rem;
padding: 0.8rem 2rem;
background: linear-gradient(135deg, var(--boxing-red), #8B0000);
font-family: 'Bebas Neue', sans-serif;
font-size: 1.2rem;
letter-spacing: 0.15em;
color: var(--ring-gold);
border: 2px solid var(--ring-gold);
clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
box-shadow: 0 4px 15px rgba(196, 30, 58, 0.4);
animation: pulse 2s ease-in-out infinite;
}
/* Responsive */
@media (max-width: 768px) {
.features-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.game-title h2 {
text-shadow: 
3px 3px 0 var(--ring-gold),
6px 6px 0 rgba(0, 0, 0, 0.3);
}
.forum-header {
flex-direction: column;
text-align: center;
}
.forum-auth-buttons {
width: 100%;
justify-content: center;
}
.forum-btn {
flex: 1;
}
.forum-categories {
grid-template-columns: 1fr;
}
.modal-content {
padding: 2rem 1.5rem;
}
}
/* Scroll reveal animations */
.reveal {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}

/* ===== Hub + subpage additions ===== */
.nav-bar { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:1rem 2rem; background:rgba(10,10,10,0.85); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,215,0,0.15); }
.nav-bar .brand { font-family:'Bebas Neue',sans-serif; font-size:1.5rem; letter-spacing:0.15em; color:var(--ring-gold); text-decoration:none; }
.nav-bar .nav-links { display:flex; gap:1.5rem; }
.nav-bar .nav-links a { font-family:'Oswald',sans-serif; font-size:0.95rem; letter-spacing:0.05em; color:var(--canvas-white); text-decoration:none; transition:color 0.2s; }
.nav-bar .nav-links a:hover { color:var(--ring-gold); }
.back-link { display:inline-block; margin:1.5rem 0 0 2rem; font-family:'Oswald',sans-serif; color:var(--ring-gold); text-decoration:none; font-size:0.95rem; }
.back-link:hover { text-decoration:underline; }
.game-hub-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:2rem; max-width:1100px; margin:0 auto; padding:0 2rem; }
.game-hub-card { position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(255,215,0,0.2);
  background:linear-gradient(160deg,#141414,#0a0a0a); padding:2.5rem 2rem; text-align:center; transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s; text-decoration:none; display:block; }
.game-hub-card:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(0,0,0,0.6); }
.game-hub-card.boxing:hover { border-color:var(--boxing-red); box-shadow:0 12px 40px rgba(196,30,58,0.25); }
.game-hub-card.football:hover { border-color:var(--victory-green); box-shadow:0 12px 40px rgba(46,204,113,0.25); }
.game-hub-card .ghc-emoji { font-size:3.5rem; margin-bottom:1rem; }
.game-hub-card .ghc-title { font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:0.08em; margin-bottom:0.6rem; color:#fff; }
.game-hub-card.boxing .ghc-title { color:var(--ring-gold); }
.game-hub-card.football .ghc-title { color:var(--victory-green); }
.game-hub-card .ghc-desc { font-family:'Barlow',sans-serif; font-size:1rem; color:#bbb; line-height:1.5; margin-bottom:1.5rem; }
.game-hub-card .ghc-cta { display:inline-block; font-family:'Bebas Neue',sans-serif; letter-spacing:0.1em; font-size:1rem;
  padding:0.6rem 1.6rem; border-radius:8px; border:2px solid currentColor; }
.game-hub-card.boxing .ghc-cta { color:var(--ring-gold); }
.game-hub-card.football .ghc-cta { color:var(--victory-green); }
.ghc-badge { position:absolute; top:1rem; right:1rem; font-family:'Bebas Neue',sans-serif; font-size:0.75rem; letter-spacing:0.1em;
  padding:0.25rem 0.7rem; border-radius:20px; background:rgba(46,204,113,0.15); color:var(--victory-green); border:1px solid rgba(46,204,113,0.4); }
.ghc-badge.live { background:rgba(255,215,0,0.12); color:var(--ring-gold); border-color:rgba(255,215,0,0.4); }
.store-row { text-align:center; margin-bottom:3rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }