* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primaryDark: #1a1a1a;
    --secondaryDark: #2d2d2d;
    --accentYellow: #ffdd00;
    --phosphorYellow: #ffd700;
    --textPrimary: #ffffff;
    --textSecondary: #cccccc;
    --borderGlow: #ffdd00;
    --shadowYellow: rgba(255, 221, 0, 0.3);
    --gradientMain: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    --gradientAccent: linear-gradient(45deg, #ffdd00 0%, #ffd700 100%);
}

body {
    font-family: 'Press Start 2P', monospace;
    background: var(--primaryDark);
    color: var(--textPrimary);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

.particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.containerGrid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.navigationPortal {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--accentYellow);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
}

.navigationPortal .containerGrid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.brandIdentity {
    display: flex;
    align-items: center;
    gap: 15px;
}

.brandLogo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid var(--accentYellow);
    box-shadow: 0 0 10px var(--shadowYellow);
    transition: transform 0.3s ease;
}

.brandLogo:hover {
    transform: scale(1.1) rotate(5deg);
}

.brandTitle {
    font-size: 18px;
    color: var(--accentYellow);
    text-decoration: none;
    text-shadow: 0 0 10px var(--shadowYellow);
    transition: all 0.3s ease;
}

.brandTitle:hover {
    color: var(--phosphorYellow);
    text-shadow: 0 0 15px var(--shadowYellow);
}

.menuPathways {
    display: flex;
    gap: 20px;
}

.navLink,
.navLinkActive {
    color: var(--textSecondary);
    text-decoration: none;
    font-size: 12px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.navLinkActive,
.navLink:hover {
    color: var(--accentYellow);
    border-color: var(--accentYellow);
    box-shadow: 0 0 10px var(--shadowYellow);
    transform: translateY(-2px);
}

.gameArena {
    min-height: calc(100vh - 80px);
}

.survivalChallenge {
    background: url(../images/4.png); /* Только картинка */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 70vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Затемнение фона (регулируйте opacity) */
.survivalChallenge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 0.5 = 50% затемнения (можно менять) */
}

/* Основной градиент + анимация */
.survivalChallenge::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        var(--gradientMain), /* linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) */
        radial-gradient(circle at 20% 50%, rgba(255, 221, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%);
    opacity: 0.8; /* Прозрачность градиента */
    animation: pulseGlow 4s ease-in-out infinite alternate;
}

/* Контент внутри блока должен быть поверх градиента */
.survivalChallenge > * {
    position: relative;
    z-index: 2;
}

@keyframes pulseGlow {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

.battleCry {
    font-size: clamp(24px, 5vw, 48px);
    text-align: center;
    margin-bottom: 30px;
    background: var(--gradientAccent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px var(--shadowYellow);
    animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.2); }
}

.gameplayDescriptor {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.missionBrief {
    font-size: 14px;
    color: var(--textSecondary);
    margin-bottom: 40px;
    line-height: 1.8;
}

.actionCommands {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.commandButton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    font-family: inherit;
    font-size: 14px;
    text-decoration: none;
    border: 2px solid var(--accentYellow);
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.primaryAction {
    background: var(--gradientAccent);
    color: var(--primaryDark);
    box-shadow: 0 0 20px var(--shadowYellow);
}

.secondaryAction {
    background: transparent;
    color: var(--accentYellow);
}

.commandButton:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 5px 25px var(--shadowYellow);
}

.commandButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.commandButton:hover::before {
    left: 100%;
}

.gameStatistics,
.systemRequirements,
.gameUpdates,
.infiniteRealm,
.competitorZone,
.mechanicsLab,
.achievementHall,
.downloadPortal,
.socialConnect,
.gameplayPreview,
.finalChallenge {
    padding: 80px 0;
    background: var(--secondaryDark);
    border-bottom: 1px solid rgba(255, 221, 0, 0.2);
}

.gameStatistics:nth-child(even),
.systemRequirements:nth-child(even), 
.gameUpdates:nth-child(even),
.mechanicsLab:nth-child(even),
.downloadPortal:nth-child(even),
.gameplayPreview:nth-child(even) {
    background: var(--primaryDark);
}

.realmContent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.featureHex {
    background: rgba(45, 45, 45, 0.8);
    border: 2px solid var(--accentYellow);
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.featureHex::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, var(--accentYellow), transparent);
    animation: rotate 4s linear infinite;
    z-index: -1;
}

.featureHex::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--secondaryDark);
    border-radius: 10px;
    z-index: -1;
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

.featureHex:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px var(--shadowYellow);
}

.featureHex i {
    font-size: 36px;
    color: var(--accentYellow);
    margin-bottom: 20px;
    display: block;
}

.featureHex h3 {
    font-size: 16px;
    margin-bottom: 15px;
    color: var(--textPrimary);
}

.featureHex p {
    font-size: 12px;
    color: var(--textSecondary);
    line-height: 1.6;
}

.statisticsTitle,
.requirementsTitle,
.updatesTitle,
.zoneTitle,
.labTitle,
.hallTitle,
.portalTitle,
.connectTitle,
.previewTitle,
.challengeTitle {
    font-size: clamp(20px, 4vw, 32px);
    text-align: center;
    margin-bottom: 40px;
    color: var(--accentYellow);
    text-shadow: 0 0 15px var(--shadowYellow);
}

.playerProfiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.playerCard {
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid var(--accentYellow);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.playerCard:hover {
    transform: translateY(-5px);
    border-color: var(--phosphorYellow);
    box-shadow: 0 10px 30px rgba(255, 221, 0, 0.2);
}

.avatarFrame {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 2px solid var(--accentYellow);
    overflow: hidden;
    position: relative;
}

.avatarFrame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.playerCard h4 {
    font-size: 14px;
    margin-bottom: 15px;
    color: var(--accentYellow);
}

.playerCard p {
    font-size: 11px;
    color: var(--textSecondary);
    margin-bottom: 15px;
    line-height: 1.6;
}

.scoreDisplay {
    background: var(--gradientAccent);
    color: var(--primaryDark);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: bold;
    display: inline-block;
}

.mechanicsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.mechanicUnit {
    background: rgba(45, 45, 45, 0.6);
    border: 1px solid rgba(255, 221, 0, 0.3);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.mechanicUnit:hover {
    border-color: var(--accentYellow);
    background: rgba(45, 45, 45, 0.9);
    transform: scale(1.02);
}

.mechanicUnit i {
    font-size: 28px;
    color: var(--accentYellow);
    margin-bottom: 15px;
}

.mechanicUnit h4 {
    font-size: 14px;
    margin-bottom: 15px;
    color: var(--textPrimary);
}

.mechanicUnit p {
    font-size: 11px;
    color: var(--textSecondary);
    line-height: 1.6;
}

.achievementTiers {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.tierBadge {
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    min-width: 200px;
    transition: all 0.3s ease;
    position: relative;
}

.bronzeTier {
    border-color: #cd7f32;
}

.silverTier {
    border-color: #c0c0c0;
}

.goldTier {
    border-color: #ffd700;
}

.tierBadge:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.tierBadge i {
    font-size: 32px;
    margin-bottom: 15px;
}

.bronzeTier i {
    color: #cd7f32;
}

.silverTier i {
    color: #c0c0c0;
}

.goldTier i {
    color: #ffd700;
}

.tierBadge h4 {
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--textPrimary);
}

.tierBadge p {
    font-size: 11px;
    color: var(--textSecondary);
}

.downloadOptions {
    text-align: center;
    margin-top: 30px;
}

.downloadLink {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: var(--gradientAccent);
    color: var(--primaryDark);
    padding: 20px 40px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px var(--shadowYellow);
}

.downloadLink:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px var(--shadowYellow);
}

.socialLinks {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.socialButton {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(45, 45, 45, 0.8);
    color: var(--textPrimary);
    padding: 15px 25px;
    border: 1px solid var(--accentYellow);
    border-radius: 8px;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.3s ease;
}

.socialButton:hover {
    background: var(--accentYellow);
    color: var(--primaryDark);
    transform: translateY(-3px);
}

.screenshotGallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.screenshotFrame {
    border: 2px solid var(--accentYellow);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.screenshotFrame:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px var(--shadowYellow);
}

.screenshotFrame img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.challengeText {
    text-align: center;
    font-size: 14px;
    color: var(--textSecondary);
    margin-bottom: 30px;
    line-height: 1.8;
}

.ultimateButton {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: var(--gradientAccent);
    color: var(--primaryDark);
    padding: 20px 40px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 25px var(--shadowYellow);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    max-width: 300px;
}

.ultimateButton:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px var(--shadowYellow);
}

.contactBase {
    background: var(--primaryDark);
    border-top: 2px solid var(--accentYellow);
    padding: 40px 0 20px;
}

.baseInfo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 30px;
}

.companyDetails h3 {
    color: var(--accentYellow);
    font-size: 16px;
    margin-bottom: 20px;
}

.companyDetails p {
    font-size: 11px;
    color: var(--textSecondary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.companyDetails i {
    color: var(--accentYellow);
    width: 16px;
}

.legalLinks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.legalLinks a {
    color: var(--textSecondary);
    text-decoration: none;
    font-size: 11px;
    transition: color 0.3s ease;
}

.legalLinks a:hover {
    color: var(--accentYellow);
}

.copyrightInfo {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 221, 0, 0.2);
    color: var(--textSecondary);
    font-size: 10px;
}

.legalDocument {
    margin-top: 80px;
    padding: 60px 0;
    background: var(--primaryDark);
}

.documentTitle {
    font-size: clamp(24px, 5vw, 36px);
    text-align: center;
    color: var(--accentYellow);
    margin-bottom: 50px;
    text-shadow: 0 0 15px var(--shadowYellow);
}

.legalContent {
    max-width: 800px;
    margin: 0 auto;
}

.legalSection {
    margin-bottom: 40px;
    background: rgba(45, 45, 45, 0.3);
    border: 1px solid rgba(255, 221, 0, 0.2);
    border-radius: 8px;
    padding: 30px;
    transition: all 0.3s ease;
}

.legalSection:hover {
    border-color: var(--accentYellow);
    background: rgba(45, 45, 45, 0.5);
}

.legalSection h2 {
    font-size: 16px;
    color: var(--accentYellow);
    margin-bottom: 20px;
}

.legalSection h3 {
    font-size: 14px;
    color: var(--phosphorYellow);
    margin: 20px 0 15px;
}

.legalSection p {
    font-size: 12px;
    color: var(--textSecondary);
    line-height: 1.8;
    margin-bottom: 15px;
}

.legalList {
    list-style: none;
    margin: 15px 0;
}

.legalList li {
    font-size: 11px;
    color: var(--textSecondary);
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.legalList li::before {
    content: '▶';
    color: var(--accentYellow);
    position: absolute;
    left: 0;
    top: 0;
}

.contactInfo {
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid var(--accentYellow);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.contactInfo p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.contactInfo i {
    color: var(--accentYellow);
    width: 16px;
}

.lastUpdated {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 221, 0, 0.2);
}

.cookieType {
    background: rgba(26, 26, 26, 0.6);
    border: 1px solid rgba(255, 221, 0, 0.3);
    border-radius: 8px;
    padding: 25px;
    margin: 20px 0;
}

.cookieType h3 {
    color: var(--phosphorYellow);
    font-size: 14px;
    margin-bottom: 15px;
}

.browserSettings {
    background: rgba(45, 45, 45, 0.4);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.browserSettings h3 {
    color: var(--accentYellow);
    font-size: 13px;
    margin-bottom: 8px;
}

.portalMessage {
    text-align: center;
    font-size: 14px;
    color: var(--textSecondary);
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .navigationPortal .containerGrid {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .menuPathways {
        justify-content: center;
    }
    
    .actionCommands {
        flex-direction: column;
        align-items: center;
    }
    
    .commandButton {
        width: 100%;
        max-width: 250px;
    }
    
    .realmContent {
        grid-template-columns: 1fr;
    }
    
    .playerProfiles {
        grid-template-columns: 1fr;
    }
    
    .achievementTiers {
        flex-direction: column;
        align-items: center;
    }
    
    .screenshotGallery {
        grid-template-columns: 1fr;
    }
    
    .baseInfo {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .legalLinks {
        align-items: center;
    }
}

@media (max-width: 480px) {
    .brandTitle {
        font-size: 14px;
    }
    
    .navLink,
    .navLinkActive {
        font-size: 10px;
        padding: 6px 12px;
    }
    
    .battleCry {
        font-size: 20px;
    }
    
    .missionBrief {
        font-size: 12px;
    }
    
    .commandButton {
        font-size: 12px;
        padding: 12px 24px;
    }
    
    .legalSection {
        padding: 20px;
    }
}

.statsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.statCard {
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid var(--accentYellow);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.statCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 221, 0, 0.1), transparent);
    transition: left 0.5s ease;
}

.statCard:hover::before {
    left: 100%;
}

.statCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px var(--shadowYellow);
    border-color: var(--phosphorYellow);
}

.statIcon {
    font-size: 32px;
    color: var(--accentYellow);
    margin-bottom: 15px;
}

.statNumber {
    font-size: 24px;
    font-weight: bold;
    color: var(--textPrimary);
    margin-bottom: 10px;
    line-height: 1.2;
}

.statLabel {
    font-size: 11px;
    color: var(--textSecondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.requirementsContainer {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

.deviceSpecs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.specCategory {
    background: rgba(45, 45, 45, 0.6);
    border: 1px solid rgba(255, 221, 0, 0.3);
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s ease;
}

.specCategory:hover {
    border-color: var(--accentYellow);
    background: rgba(45, 45, 45, 0.8);
}

.specCategory h3 {
    font-size: 14px;
    color: var(--accentYellow);
    margin-bottom: 20px;
    text-align: center;
}

.specList {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.specItem {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(26, 26, 26, 0.5);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.specItem:hover {
    background: rgba(26, 26, 26, 0.8);
    transform: translateX(5px);
}

.specItem i {
    font-size: 18px;
    color: var(--accentYellow);
    width: 20px;
    text-align: center;
}

.specDetails {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.specTitle {
    font-size: 11px;
    color: var(--textSecondary);
    text-transform: uppercase;
}

.specValue {
    font-size: 12px;
    color: var(--textPrimary);
    font-weight: bold;
}

.compatibilityInfo {
    background: rgba(45, 45, 45, 0.6);
    border: 1px solid rgba(255, 221, 0, 0.3);
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s ease;
}

.compatibilityInfo:hover {
    border-color: var(--accentYellow);
    background: rgba(45, 45, 45, 0.8);
}

.compatibilityInfo h3 {
    font-size: 14px;
    color: var(--accentYellow);
    margin-bottom: 20px;
    text-align: center;
}

.compatibilityGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.compatibilityItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: rgba(26, 26, 26, 0.5);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.compatibilityItem:hover {
    background: rgba(26, 26, 26, 0.8);
    transform: scale(1.05);
}

.compatibilityItem i {
    font-size: 24px;
    color: var(--accentYellow);
}

.compatibilityItem span {
    font-size: 10px;
    color: var(--textSecondary);
    text-align: center;
}

.updatesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.updateCard {
    display: flex;
    gap: 20px;
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid rgba(255, 221, 0, 0.3);
    border-radius: 12px;
    padding: 25px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.updateCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradientAccent);
    transition: width 0.3s ease;
}

.updateCard:hover::before {
    width: 8px;
}

.updateCard:hover {
    border-color: var(--accentYellow);
    background: rgba(26, 26, 26, 0.9);
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(255, 221, 0, 0.1);
}

.updateDate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    background: var(--gradientAccent);
    color: var(--primaryDark);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.updateDate .day {
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
}

.updateDate .month {
    font-size: 10px;
    text-transform: uppercase;
    line-height: 1;
}

.updateContent {
    flex: 1;
}

.updateContent h3 {
    font-size: 14px;
    color: var(--textPrimary);
    margin-bottom: 10px;
}

.updateContent p {
    font-size: 11px;
    color: var(--textSecondary);
    line-height: 1.6;
    margin-bottom: 15px;
}

.updateTags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.updateTag {
    background: rgba(255, 221, 0, 0.2);
    color: var(--accentYellow);
    font-size: 9px;
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.moreUpdates {
    text-align: center;
    margin-top: 40px;
}

.moreUpdatesLink {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accentYellow);
    text-decoration: none;
    font-size: 12px;
    padding: 12px 24px;
    border: 1px solid var(--accentYellow);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.moreUpdatesLink:hover {
    background: var(--accentYellow);
    color: var(--primaryDark);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .requirementsContainer {
        grid-template-columns: 1fr;
    }
    
    .deviceSpecs {
        grid-template-columns: 1fr;
    }
    
    .compatibilityGrid {
        grid-template-columns: 1fr 1fr;
    }
    
    .statsGrid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    
    .updatesGrid {
        grid-template-columns: 1fr;
    }
}