/* Champion Zone - Layout CSS with gc16 prefix */
* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: #0A0A0A; color: #FFFFFF; line-height: 1.6; overflow-x: hidden;}
.gc16-header {background: #0A0A0A; border-bottom: 1px solid #A9A9A9; position: sticky; top: 0; z-index: 100; padding: 0.75rem 0;}
.gc16-nav {display: flex; justify-content: space-between; align-items: center; max-width: 430px; margin: 0 auto; padding: 0 1rem;}
.gc16-logo-container {display: flex; align-items: center; gap: 0.5rem;}
.gc16-logo {width: 32px; height: 32px; border-radius: 4px;}
.gc16-site-name {font-size: 1.125rem; font-weight: 700; color: #FFFFFF;}
.gc16-nav-actions {display: flex; align-items: center; gap: 0.5rem;}
.gc16-btn {padding: 0.5rem 1rem; border: none; border-radius: 4px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s;}
.gc16-btn-primary {background: #FFFFFF; color: #0A0A0A;}
.gc16-btn-primary:hover {background: #DCDCDC;}
.gc16-btn-secondary {background: transparent; color: #FFFFFF; border: 1px solid #A9A9A9;}
.gc16-btn-secondary:hover {background: #A9A9A9;}
.gc16-menu-toggle {background: transparent; border: none; color: #FFFFFF; font-size: 1.25rem; cursor: pointer; display: block;}
.gc16-nav-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10,10,10,0.8); z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.3s;}
.gc16-nav-overlay.gc16-active {opacity: 1; pointer-events: auto;}
.gc16-mobile-nav {position: fixed; top: 0; right: -280px; width: 280px; height: 100vh; background: #0A0A0A; border-left: 1px solid #A9A9A9; z-index: 200; transition: right 0.3s; padding: 2rem 0; overflow-y: auto;}
.gc16-mobile-nav.gc16-active {right: 0;}
.gc16-mobile-nav ul {list-style: none;}
.gc16-mobile-nav ul li {border-bottom: 1px solid rgba(169,169,169,0.2);}
.gc16-mobile-nav ul li a {display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; color: #FFFFFF; text-decoration: none; transition: background 0.2s;}
.gc16-mobile-nav ul li a:hover {background: rgba(169,169,169,0.1);}
.gc16-mobile-nav ul li a i {font-size: 1.125rem; color: #DCDCDC;}
.gc16-main {max-width: 430px; margin: 0 auto; padding-bottom: 80px;}
.gc16-container {padding: 1rem;}
.gc16-section {margin: 2rem 0;}
h1 {font-size: 1.75rem; color: #FFFFFF; margin-bottom: 1.5rem; line-height: 1.3;}
h2 {font-size: 1.5rem; color: #DCDCDC; margin: 1.5rem 0 1rem 0;}
h3 {font-size: 1.25rem; color: #DCDCDC; margin: 1rem 0 0.5rem 0;}
.gc16-card {background: linear-gradient(135deg, rgba(220,220,220,0.05) 0%, rgba(169,169,169,0.05) 100%); border: 1px solid rgba(169,169,169,0.2); border-radius: 8px; padding: 1.5rem; margin: 1rem 0; box-shadow: 0 2px 8px rgba(0,0,0,0.3);}
.gc16-card-text {color: rgba(255,255,255,0.9); line-height: 1.8; margin: 0.75rem 0;}
.gc16-list {list-style: none; padding-left: 0; margin: 1rem 0;}
.gc16-list li {padding: 0.5rem 0 0.5rem 1.5rem; position: relative; color: rgba(255,255,255,0.9);}
.gc16-list li:before {content: '▸'; position: absolute; left: 0; color: #DCDCDC; font-weight: 700;}
.gc16-link-btn {display: inline-block; padding: 0.75rem 1.5rem; background: #FFFFFF; color: #0A0A0A; text-decoration: none; border-radius: 4px; font-weight: 600; margin: 0.5rem; transition: all 0.2s; border: none; cursor: pointer; font-size: 0.9375rem;}
.gc16-link-btn:hover {background: #DCDCDC; transform: translateY(-1px);}
.gc16-text-center {text-align: center;}
.gc16-mt-2 {margin-top: 2rem;}
.gc16-carousel-container {position: relative; width: 100%; overflow: hidden; border-radius: 8px; margin: 1rem 0;}
.gc16-carousel-slide {display: none; width: 100%;}
.gc16-carousel-slide.gc16-active {display: block;}
.gc16-carousel-slide img {width: 100%; height: auto; border-radius: 8px;}
.gc16-carousel-dots {display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.75rem;}
.gc16-carousel-dot {width: 8px; height: 8px; border-radius: 50%; background: rgba(169,169,169,0.4); cursor: pointer; transition: all 0.3s;}
.gc16-carousel-dot.gc16-active {background: #FFFFFF; width: 24px; border-radius: 4px;}
.gc16-game-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0;}
.gc16-game-item {background: rgba(220,220,220,0.05); border: 1px solid rgba(169,169,169,0.2); border-radius: 8px; padding: 0.75rem; text-align: center; cursor: pointer; transition: all 0.2s;}
.gc16-game-item:hover {background: rgba(220,220,220,0.1); border-color: #DCDCDC; transform: translateY(-2px);}
.gc16-game-icon {width: 80px; height: 80px; border-radius: 8px; margin-bottom: 0.5rem;}
.gc16-game-name {font-size: 0.875rem; color: #FFFFFF; font-weight: 500;}
.gc16-footer {background: #0A0A0A; border-top: 1px solid #A9A9A9; padding: 2rem 1rem 1rem 1rem; margin-top: 3rem;}
.gc16-footer-section {margin-bottom: 1.5rem;}
.gc16-footer-title {font-size: 1.125rem; color: #FFFFFF; margin-bottom: 0.75rem; font-weight: 700;}
.gc16-footer-links {display: flex; flex-wrap: wrap; gap: 0.75rem;}
.gc16-footer-link {color: #DCDCDC; text-decoration: none; font-size: 0.9375rem; transition: color 0.2s;}
.gc16-footer-link:hover {color: #FFFFFF;}
.gc16-copyright {text-align: center; color: rgba(255,255,255,0.6); font-size: 0.8125rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(169,169,169,0.2);}
.gc16-bottom-nav {position: fixed; bottom: 0; left: 0; right: 0; background: #0A0A0A; border-top: 1px solid #A9A9A9; z-index: 90;}
.gc16-bottom-nav-container {display: flex; justify-content: space-around; align-items: center; max-width: 430px; margin: 0 auto; padding: 0.5rem 0;}
.gc16-bottom-nav-item {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.25rem; color: #DCDCDC; text-decoration: none; transition: color 0.2s; min-width: 60px;}
.gc16-bottom-nav-item:hover {color: #FFFFFF;}
.gc16-bottom-nav-icon {font-size: 1.5rem; margin-bottom: 0.125rem;}
.gc16-bottom-nav-label {font-size: 0.6875rem; font-weight: 500;}
@media (max-width: 430px) {.gc16-game-grid {grid-template-columns: repeat(3, 1fr); gap: 0.75rem;} .gc16-game-icon {width: 70px; height: 70px;} .gc16-game-name {font-size: 0.8125rem;}}